好的,这是可能的.
我有一个背景图像.最重要的是,我有一个透明的灰色框内容.我想在文字顶部有标题,这基本上是暴露背景的字母.所以,文字会移除灰色框,让背景显示出来.
我唯一可以看到的奇怪的方式是创建一个图像,字母在背景上透明一样的灰色,然后尝试以某种方式与灰色框对齐.
还有另一种 – 更好的方式吗？
解决方法
一种方法是使用-webkit-background-clip：text;：
demo here(仅显示webkit).
使用位置,我们可以同步两个背景：
#container,#container h1 {
background: url(bg.png)
}
#container {
position: relative;
}
#container #gray {
background: rgba(0,.8);
padding-top: 8em;
}
#container h1 {
font-size: 8em;
padding-top: /* padding + border of div */;
position: absolute;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
