使用 CSS3 时是否可以只显示背景图像的一部分?我想使用图像作为背景,但只显示一半,那么您可以为背景图像定义类似蒙版的东西吗?
4 回答
试试这个:
body {
background-image: url('top.jpg'),
url('middle.jpg'),
url('bottom.jpg');
}
WebKit 现在支持 CSS 中的 alpha 蒙版 SVG 图像可以用作蒙版。例如,一个部分透明的圆圈。
-webkit-mask-image: url(circle.svg);
http://webkit.org/blog/181/css-masks/
希望这可以帮助。
唯一的问题是“剪辑路径”、“掩码”和“过滤器”(不是 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/
在 Opera 中,您只能在 xhtml 页面中使用内联 SVG 来实现该效果。将您的图像夹在 SVG 中,定义一个蒙版并执行 a<use xlink:href="#image" mask="url(#yourmask)"/>
以获得效果。