在CSS中制作透明文本，并将背景图像放入文本形状中

Question

CSS颜色没有透明的输入，也就是说它们都是实心的。因此，我尝试使用rgba为颜色属性设置不透明度，但图像背景无法通过文本显示。有办法做到这一点吗？所以上面有一个背景图像和厚重的文本，需要透明，只显示字母的轮廓。

我希望得到像dank.sh 这样的结果

Answer 1

试试这个：

element.style {
color: rgba(0,0,0,0.0); /* for transparent color */
-webkit-text-stroke: 1px rgba(0,0,0,1.0); /* for solid black outline */
}

更新

如果你需要背景图像通过文本：

.bg-though-text {
font-size: 50px;
font-weight: 700;
text-transform: uppercase;
background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6); /* Here you can use an image bg */

/* This will start the magic */
-webkit-background-clip: text; /* This will bring bg shape according to text*/
-webkit-text-fill-color: transparent; /* This will make text color transparent */
color: rgba(0,0,0,0.0); /* This will make text color transparent for sure */
}

<p class="bg-though-text">Gradient bg</p>

更新2

透明文本，白色背景和图像背后。

.bg {
background-image: linear-gradient(90deg, #a50026, #d3322b, #f16d43, #fcab64, #fedc90, #faf8c0, #dcf1ec, #abd6e8, #76abd0, #4a74b4, #4a74b4);
padding:20px;
text-align: center;
}
.transparent-text {
font-size: 50px;
text-transform: uppercase;
display: inline-block;
border-radius: 5px;  
padding: 5px 10px;

/* Here we go */
background: #fff;
color: #000;
mix-blend-mode: screen;
}

<div class="bg">
<p class="transparent-text">Transparent text</p>
</div>

更新3

一个SVG解决方案，IE11支持：

.bg {
background-image: linear-gradient(90deg, #a50026, #d3322b, #f16d43, #fcab64, #fedc90, #faf8c0, #dcf1ec, #abd6e8, #76abd0, #4a74b4, #4a74b4);
padding:20px;
text-align: center;
}

<div class="bg">
<svg viewbox="0 0 100 60">
<defs>
<g id="text">
<text text-anchor="middle" x="50" y="23" font-size="12">Transtarent text</text>
</g>
<mask id="mask" x="0" y="0" width="100" height="50">
<rect x="0" y="0" width="100" height="40" fill="#fff"/>
<use xlink:href="#text" />
</mask>
</defs>
<rect x="5" y="5" width="90" height="30" mask="url(#mask)"  fill="#fff" fill-opacity="1"/>
</svg>
</div>

Answer 2

Opacity是你的朋友：

#id {
opacity: 0.5; // For 50% opacity
}

Answer 3

.text {
opacity: 0.7; /* Can be varied to the transparency you want */
}

opacity将更改文本透明度。