当前位置：文江博客话题详情

“负面” CSS 中的文本？

发布于 2024-12-07 22:50:55 字数 143 浏览 1 评论 0原文

我想知道是否可以用简单的 css 创建如附图所示的效果。下一个最佳选择是什么？提前致谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

手长情犹 2024-12-14 22:50:55

目前仅使用 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仿真实验，实现蒙版文字效果。

Currently you can't achieve this using only CSS. However, you can do that in webkit based browsers (Safari, Chrome etc.) using CSS extentsions and emulate via SVG in other modern browsers which supports SVG.

Example markup for webkit based browsers:

<!DOCTYPE html>
<html><head>
<title>Foo</title>
</head><body>
    <div class="mask">
        <h1>Masked Text</h1>
    </div>
</body></html>

and 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;
}

See working example here : http://jsfiddle.net/Q9JWM/ (Works only Chrome & Safari)

Also here a SVG emulation experiment to achieve masked text effect.

回复收藏 0 原文