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

Question

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

score 0 · Accepted Answer

试试这个：

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

score 0 · Accepted Answer

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

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

希望这可以帮助。

score 0 · Accepted Answer

唯一的问题是“剪辑路径”、“掩码”和“过滤器”（不是 IE“过滤器”而是 SVG“过滤器”）仅适用于 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/preview/

score 0 · Accepted Answer

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

4 回答 4