Question

是否可以在白色背景上方放置透明文字，背后有图像，以便文本显示为背后图像的颜色。

这是一个JSFiddle，我开始让你更好地理解我的意思：

现在文字是黑色的，但有没有办法让它透明，以便文字的颜色是背景图片的颜色？

HTML：

<div class="image">
    <div class="box">
        <div class="text">Sample Text</div>        
    </div>
</div>

CSS：

.text {
    color: black;
    font-family: Arial;
    font-size: 72px;
    font-weight: bold;
}

.box {
    display: inline-block;
    background: white;
    padding: 5px 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -219px;
    margin-top: -47.5px;

}

.image {
    background: url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat;
    width: 960px;
    height: 420px;
    position: relative;
}

Answer 1

Demo

好的，感谢ralph.m提供的this example，似乎有可能使用-webkit-background-clip只能被可以使用webkit的浏览器支持。

.text {
    font-family: Arial;
    font-size: 72px;
    font-weight: bold;
    text-align: center;
    background: url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    background-position: -200px -50px;
}

您的背景大小和位置可能需要调整以适应。

Answer 2

我猜您正在寻找rgba（）函数。它需要4个参数，3个颜色通道和一个控制颜色不透明度的alpha。

透明文字在背景？

2 个答案: