html - 使用文本作为背景图像上的 mask

标签 html css

我的页面上有一个漂亮的背景,我希望我的文本标题充当一个 mask 以穿过它包含的 div 并将背景作为纹理。

我可以在 CSS 中执行此操作还是必须打开 Photoshop

最佳答案

有限的浏览器支持,但是 background-clip 可以让你得到这个效果:http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (点击动画按钮以获得更多乐趣)

使用 SVG 你可以这样做:http://people.opera.com/dstorey/images/newyorkmaskexample.svg (查看源代码以查看实际完成的操作,也请参见 reference article)

使用背景图像和 CSS,您可以这样做:http://www.netmagazine.com/tutorials/texturise-web-type-css

关于html - 使用文本作为背景图像上的 mask ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11924800/

相关文章:

javascript - 第二次按下按钮时功能不执行

html - 镜像 HTML 5 视频

css - 更改页眉和页脚中的背景颜色 Clean Retina WordPress 主题

css - 如何使用 Bootstrap "row"和 "col-*-*"转换基于表格的布局

javascript - 在两列上传播 D3.js 图例

html - 在此上下文中,Symfony4 元素图例不允许作为元素 div 的子元素

html - 在容器底部堆叠 HTML 元素

html - 在大数据的 ng-repeat 性能下提高 angular js ng-class 性能

javascript - 在 Javascript 中添加注释/注释的示例代码

css - 垂直对齐 : Flexbox VS Table/Table-cell on elements with unknown height