如何在非透明背景上创建透明文本
Posted
技术标签:
【中文标题】如何在非透明背景上创建透明文本【英文标题】：How to create transparent text on non-transparent background 【发布时间】：2017-02-01 03:11:33 【问题描述】：想象一下：有一个分配给“body”的背景和一个带有文本的白色“div”。这段文字是为了让我们可以通过它看到背景。如何用 CSS 实现它？像这样：
【问题讨论】：
我们可以试试吗？ 能否请您显示一些代码或一些示例？ 我认为这是http://***.com/questions/10835500/how-to-change-text-transparency-in-html-css的副本 opacity 对你来说可能是一本好书 :) 这可能是一张不透明的图片。 【参考方案1】：您可以使用 SVG 创建一个mask，其中rect 元素用于白色背景，text 元素用于透明文本部分。
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" >
<rect id="overlay" x="0" y="0" />
<text id="text" x="50%" y="0" dy="65px">Some text</text>
</mask>
</defs>
<rect id="r" x="0" y="0" />
</svg>更新：要使用透明文本创建完整的元素大小覆盖，您可以在父元素上使用 position: relative，在 svg 上使用 position: absolute，并将 mask 的高度和宽度设置为 100%。要将text居中，您可以将dy: 50%与alignment-baseline: middle;和text-anchor: middle;一起使用
body
margin: 0;
padding: 0;
.element
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;
position: relative;
section
height: 100vh;
background: lightgreen;
svg
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
width: 100%;
svg text
text-anchor: middle;
alignment-baseline: middle;
font-size: 40px;
font-weight: bold;
svg #overlay
fill: white;
opacity: 0.7;
svg #r
fill: white;
mask: url(#mask);
<div class="element">
<svg>
<defs>
<mask id="mask" x="0" y="0" >
<rect id="overlay" x="0" y="0" />
<text id="text" x="50%" y="0" dy="50%">Some text here</text>
</mask>
</defs>
<rect id="r" x="0" y="0" />
</svg>
</div>
<section></section>【讨论】：
【参考方案2】：使用 css 你可以使用 opacity:0.6; （0 = 完全透明 - 1 = 完全可见）。
*font-family:Helvetica, Arial, Sans-Serif;
.backgroundbackground:url(http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg);
.textfont-size: 5em; font-weight:bold; opacity:0.6;<div class="background">
<span class="text">
Lorem ipsum
</span>
</div>使用 Photoshop，您可以减少文本图层的填充栏或增加该图层的透明度。
【讨论】：
【参考方案3】：使用不透明度；
html:
<body>
<div class='frontimage'>
</div>
</body>
css:
body
background-image: url("yourimage.jpg");
.frontimage
background-image: url("yourotherimage.jpg");
opacity: 0.5;
【讨论】：
以上是关于如何在非透明背景上创建透明文本的主要内容，如果未能解决你的问题，请参考以下文章
PB高手们请赐教！PB能使动态文本框背景透明吗？诸如“mle_1”控件，数据窗口背景能透明也行！见详述~
[HTML][CSS] 如何改变背景图片的不透明度，而不是上面的文字？