17

我的页面上有一个漂亮的背景，我希望我的文本标题充当遮罩以切开其包含的 div 并将背景作为纹理。

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

4

4 回答 4

9

有限的浏览器支持，但background-clip可以获得这种效果：http ://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ （点击 Animate 按钮以获得更多乐趣）

使用 SVG 你可以这样做： http: //people.opera.com/dstorey/images/newyorkmaskexample.svg（查看源代码以了解实际做了什么，也请参阅参考文章）

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

于 2012-08-12T18:48:38.077 回答
5

正如 CSS-Tricks 在本文中展示的那样，“文本后面的图像”可以这样完成：

h1 {
   color: white;  /* Fallback: assume this color ON TOP of image */
   background: url(images/fire.jpg) no-repeat; /* Set the backround image */
   -webkit-background-clip: text; /* clip the background to the text inside the tag*/
   -webkit-text-fill-color: transparent; /* make the text transparent so 
                                          * the background shows through*/
}

但它不能保证适用于所有浏览器，所以他们建议一些变通方法，比如modernizr。

这是它工作时的样子：

工作时的样子

于 2015-03-16T16:22:40.843 回答
4

CSS3 中有一个background-clip: text属性，尽管它并不适用于所有浏览器。有关更多详细信息，请参见此处。

于 2012-08-12T18:49:27.997 回答
1

扩展@sgress454 的答案。现在background-clip: text可以在 Firefox 和 Edge 上运行，但是它的浏览器兼容性还不够全面。Safari 和 Chrome 部分不支持（仅支持前缀版本的属性。根据WebKit 博客，剪辑中不包含文本装饰或阴影。）。background-clip: text仍然是您正在寻找的：

背景剪辑：文本；

背景被绘制在（剪辑到）前景文本中。

MDN

演示：

body {background: black;}

div {
  background: url(https://images.unsplash.com/photo-1543005472-1b1d37fa4eae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60), black;
  background-clip: text;
  color: transparent;
}
<div>This background clips to the text.</div>

于 2020-02-25T15:35:31.213 回答