如何在非透明背景上创建透明文本

-1

想象一下：有一个背景分配给“body”和一个白色的“div”，其中有文本。这段文字让我们可以通过它看到背景。如何实现与CSS？像这样：如何在非透明背景上创建透明文本

2016-09-23 Евгений Беляев

我们应有的尝试？ –

你能不能展示一些代码或者一些例子？ – aavrug

我认为这是[http://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css](http://stackoverflow.com/questions/10835500/如何改变文本透明度在html-css） – Corporalis

您可以使用SVG创建这个和应用mask

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: url('http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg'); 
 
    background-size: cover; 
 
    height: 100vh; 
 
    background-position: center; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
svg { 
 
    width: 300px; 
 
    height: 100px; 
 
} 
 
svg text { 
 
    text-anchor: middle; 
 
} 
 
svg #overlay { 
 
    fill: white; 
 
    opacity: 0.7; 
 
} 
 
svg #text { 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
} 
 

 
svg #r { 
 
    fill: white; 
 
    mask: url(#mask); 
 
}

<svg> 
 
    <defs> 
 
    <mask id="mask" x="0" y="0" width="100%" height="100%"> 
 
     <rect id="overlay" x="0" y="0" width="100%" height="100%" /> 
 
     <text id="text" x="50%" y="0" dy="65px">LOREM ISPUM</text> 
 
    </mask> 
 
    </defs> 
 
    <rect id="r" x="0" y="0" width="100%" height="100%" /> 
 
</svg>

来源

2016-09-23 10:15:42

使用不透明度;

HTML：

<body> 
    <div class='frontimage'> 

    </div> 
</body>

CSS：

body{ 
    background-image: url("yourimage.jpg"); 
} 
.frontimage{ 
    background-image: url("yourotherimage.jpg"); 
    opacity: 0.5; 
}

来源

2016-09-23 09:56:42 Roy123

与CSS，你可以使用不透明度：0.6; （0 =全透明 - 1 =完全可见）。

*{font-family:Helvetica, Arial, Sans-Serif;} 
 
.background{background:url(http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg);} 
 
.text{font-size: 5em; font-weight:bold; opacity:0.6;}

<div class="background"> 
 
<span class="text"> 
 
    Lorem ipsum 
 
</span> 
 
</div>

用Photoshop可以减少文字图层的填充棒或增加该层的透明度。

来源

2016-09-23 10:05:00 JoelBonetR

如何在非透明背景上创建透明文本

回答

相关问题