在 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 */
}

更新

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

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 */
}

更新 2

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

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

.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;
}

更新 3

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

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

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