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

Question

使用 CSS3 时是否可以仅显示背景图像的一部分？我想使用图像作为背景，但只显示一半，那么是否可以为背景图像定义类似遮罩之类的东西？

Answer 1

唯一的问题是“clip-path”、“mask”和“filter”（不，不是 IE“filter”，而是 SVG“filter”）仅适用于 Firefox 和 Safari（是的，不适用于 Chrome）。他们的做法不同。 Firefox 需要通过 id 指定的 svg 剪辑路径，例如：

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

而 Safari 仅使用形状本身来创建剪辑路径：

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

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

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

否则，也许你可以从 CSS 3 的后台操作中得到一些东西： http://www.css3.info/预览/

Answer 2

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

-webkit-mask-image: url(circle.svg);

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

希望这有帮助。

Answer 3

在 Opera 中，您只能在 xhtml 页面中使用内联 SVG 来实现该效果。将图像放入 SVG 中，定义遮罩并执行 以获得效果。

Answer 4

试试这个：

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