我想知道是否有可能用简单的css创建一个如附图所示的效果。下一个最佳选择是什么？提前致谢！
问问题
5027 次
3 回答
3
我想这可能是你正在寻找的。当然，它在浏览器中并没有得到很好的支持，但是您没有将其列为要求！
于 2011-11-04T13:47:49.597 回答
1
目前，您无法仅使用 CSS 来实现此目的。但是，您可以在基于 webkit 的浏览器（Safari、Chrome 等）中使用 CSS 扩展并在其他支持 SVG 的现代浏览器中通过 SVG 进行模拟。
基于 webkit 的浏览器的示例标记：
<!DOCTYPE html>
<html><head>
<title>Foo</title>
</head><body>
<div class="mask">
<h1>Masked Text</h1>
</div>
</body></html>
和CSS：
.mask {
font-size:90px;
font-family:Arial, sans;
font-weight:700;
background:white url(/image.jpg) repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
请参阅此处的工作示例：http: //jsfiddle.net/Q9JWM/（仅适用于 Chrome 和 Safari）
这里还有一个 SVG 仿真实验来实现蒙版文本效果。
于 2011-10-06T03:28:15.387 回答
0
调查opacity。这是W3C文档的链接。这可能是一个stackoverflow问题......但是，CSS的重点是控制表示 - 因此，页面设计，因此也满足了该站点的要求。
于 2011-10-05T13:06:25.843 回答