使用CSS3仅显示部分背景图像

Question

使用CSS3时是否可以只显示背景图像的一部分？我想使用一个图像作为背景，但只显示它的一半，所以有没有像你可以为你的背景图像定义的面具？

Answer 1

试试这个：

body {
    background-image: url('top.jpg'), 
                      url('middle.jpg'), 
                      url('bottom.jpg');
}

Answer 2

WebKit现在支持CSS中的alpha掩码 SVG图像可用作蒙版。例如，部分透明的圆圈。

-webkit-mask-image：url（circle.svg）;

http://webkit.org/blog/181/css-masks/

希望这会有所帮助。

Answer 3

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

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

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

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

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

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

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

Answer 4

在Opera中，您只能在xhtml页面中使用内联SVG来实现此效果。将您的图像放入SVG中，定义一个遮罩并执行<use xlink:href="#image" mask="url(#yourmask)"/>以获得效果。