使用CSS3仅显示部分背景图像 [英] Showing only part of background image using CSS3

问题描述

使用CSS3时是否可以只显示背景图像的一部分？我想使用一个图像作为背景，但只显示其中的一半，那么是否有类似于你可以为背景图像定义的面具？

Is it possible to show only a part of a backgroundimage when using CSS3? I want to use an image as a background but only show half of it, so is there something like a mask you can define for your backgroundimages?

推荐答案

唯一的问题是剪辑路径，掩码和过滤器（不是IE过滤器而是SVG过滤器）仅适用于Firefox和Safari（是的没有Chrome）。他们以不同的方式做到了。 Firefox需要一个通过id指定的svg clippath，例如：

Well only problem is that "clip-path", "mask" and "filter" (no not the IE "filter" but SVG "filter") only works for Firefox and Safari (yes no Chrome). And they do it differently. Firefox needs an svg clippath specified via an id eg:

.box { clip-path: url("roundedrect.svg#cp1"); }

虽然Safari只是使用形状本身来创建clippath：

while Safari just uses the shape itself to create clippath from:

.box { clip-path: url("roundedrect.svg"); }

我还没有找到在Opera和Chrome中实现这一目标的方法。

I have yet to discover a way to do it in Opera and Chrome.

但是对于FF和Safari跨浏览器的例子，我创建了这个： http://tokimon.dk/testing/css-svg-test.html 。

But for FF and Safari "cross browser" example i have created this: http://tokimon.dk/testing/css-svg-test.html.

否则也许你可以得到一些东西CSS 3中的背景操作： http://www.css3.info/preview/

Otherwise maybe you can get something out of the background manipulation in CSS 3: http://www.css3.info/preview/

这篇关于使用CSS3仅显示部分背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！