0

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

4

4 回答 4

0

试试这个:

body {
    background-image: url('top.jpg'), 
                      url('middle.jpg'), 
                      url('bottom.jpg');
}
于 2010-06-16T12:42:04.650 回答
0

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

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

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

希望这可以帮助。

于 2010-06-22T10:24:31.043 回答
0

唯一的问题是“剪辑路径”、“掩码”和“过滤器”(不是 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/

于 2010-07-16T09:48:26.070 回答
0

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

于 2010-08-12T04:53:20.683 回答