好的,这是可能的.
我有一个背景图像.最重要的是,我有一个透明的灰色框内容.我想在文字顶部有标题,这基本上是暴露背景的字母.所以,文字会移除灰色框,让背景显示出来.
我唯一可以看到的奇怪的方式是创建一个图像,字母在背景上透明一样的灰色,然后尝试以某种方式与灰色框对齐.
还有另一种 – 更好的方式吗？
解决方法
一种方法是使用-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;
- }
