透明文本允许背景显示

我想知道是否有可能实现具有纯色背景的容器内的透明文本。透明文本允许您看到容器后面的图像。透明文本允许背景显示

像这样的事情

Transparent text

与谷歌搜索发现这一点。该图像是在Photoshop中创建的。这个效果可以通过CSS实现吗？如果是这样，怎么样？

只是好奇。

2016-12-01 Cruz Nunez

我希望这将是你在找什么

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     body { 
 
      background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) repeat; 
 
      margin: 10px; 
 
     } 
 
     
 
     h1 { 
 
      background-color: #fff; 
 
      overflow: hidden; 
 
      display: inline-block; 
 
      padding: 10px; 
 
      font-weight: bold; 
 
      font-family: arial; 
 
      font-size: 200px; 
 
     } 
 
     
 
     span { 
 
      background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) -20px -20px repeat; 
 
      -webkit-text-fill-color: transparent; 
 
      -webkit-background-clip: text; 
 
      display: block; 
 
     } 
 
     .Container { 
 
      text-align: center; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="Container"> 
 
     <h1><span>LOS ANGELES</span></h1> 
 
    </div> 
 
</body> 
 

 
</html>

所有你只是想要做的是设置-webkit-text-fill-color或color到transparent和-webkit-background-clip到text。简单:)

来源

2016-12-01 04:56:50 Nitheesh

另一种方法是使用clip-path并使用SVG图像作为蒙版 - SVG图像本身可以包含文本。这有支持WebKit和壁虎，但不是IE（http://caniuse.com/#feat=css-masks）

https://css-tricks.com/clipping-masking-css/

来源

2016-12-01 04:58:34 Dai

透明文本允许背景显示

回答

相关问题