【问题标题】：Text with background color带有背景颜色的文本
【发布时间】：2015-05-22 09:02:24
【问题描述】：

我有一个奇怪的问题，老实说我不知道该怎么做。

我有一个带有背景图片的盒子。在背景图像上，我有很多带有背景颜色和文本的框。我希望每个框中文本的颜色都是透明的，因此颜色将是文本上方的背景图像的一部分。

应该是图片，而不是绿色背景。

<div class="box">
    <div class="background">
        Example text
    </div>
</div>

.box {
    width:200px;
    height:20px;
    background-color: green;
    padding: 10px;
}

.background {
    color: transparent;
    height: 100%;
    width: auto;
    background-color: red;
    text-align: center;
}

如果我设置颜色：透明，文本的颜色会变成红色，我不确定是否有可能是背景图像。

编辑：我更新了我的 jsfiddle。我希望文本的颜色成为文本背后图像的一部分。

【问题讨论】：

为什么要使文本不可见？只是不要写它......
您的预期输出是什么？您可以通过添加有问题的图像来显示它。
你想要在你的盒子上打出一个与文本形状相同的洞，这样你就可以通过它们看到背景图像？我认为这是不可能的。
不...我不想隐身...我想在我之前的例子中是绿色的。但不是设置颜色：绿色，而是重用来自父绿色背景的颜色。看起来很奇怪，我真正的想法是绿色背景作为图像。我更新了我的 jsfiddle。
在 Chrome 中查看此内容jsfiddle.net/NT7z7/11

标签： html css

【解决方案1】：

你可以这样做，但你需要一个相当新的属性：mix-blend-mode。

尽管如此，支持仍在增长：FF 已经支持了一段时间，最新的 Chrome 也支持它。

要获得它，您需要一个红色背景上的灰色文本，并将模式设置为强光

body {
    background-image: url(http://placekitten.com/1200/800);
}
.test {
    font-size: 300px;
    color: #888;
    background-color: red;
    mix-blend-mode: hard-light;
}

&lt;div class="test"&gt;TESTING&lt;/div&gt;

【讨论】：

【解决方案2】：

我建议在父元素中为字体使用颜色，然后在子元素中继承字体颜色，不确定你真正想要什么

.box {
    width:200px;
    height:20px;
    background-color: green;
    padding: 10px;
    color: blue;
}

.background {
    color: inherit;
    height: 100%;
    width: auto;
    background-color: red;
    text-align: center;
}

否则，在具有透明度的子元素中为字体使用 rgb 颜色，然后您的背景将可见，例如颜色：rgba(0, 0, 0, 0.5);

【讨论】：

【解决方案3】：

我不知道是否可以使用 CSS。我能想出的唯一解决方案是使用 Canvas。但是它太复杂了，而且编码很多。背面画布包含您要显示的图像，在前面的画布中您可以进行背景着色和字母书写。代码如下：

HTML

 <body>
      <canvas id="back">
      </canvas>
      <canvas id="front">
      </canvas>
    </body>

CSS

#back{
position: fixed;
top: 40px;
left: 40px;
z-index: -1;
}

 #front{
position: fixed;
top: 60px;
left: 60px;
z-index: 99;
}

JavaScript

window.onload = function(){

var h = new Image();

h.src = 'images/color.jpg';

var back = document.getElementById('back');

back.width = h.width;

back.height = h.height;

back.getContext('2d').drawImage(h,0,0,h.width,h.height); 

var front = document.getElementById('front');
var back = document.getElementById('back');

front.width = h.width - 40;

front.height = h.height - 40;

var ctx = front.getContext('2d');

ctx.fillStyle="#ED6";

ctx.fillRect(0,0,h.width - 40,h.height - 40);

ctx.font="150px Verdana";

ctx.fillStyle= 'rgba(0,0,0,1)';

ctx.fillText("HELLO" , h.width/2 - 300 , h.height/2 - 25);

maketransparent(front,back);
};

function maketransparent(front,back){

var backimage = back.getContext('2d').getImageData(0,0,back.width,back.height);

var frontimage = front.getContext('2d').getImageData(0,0,front.width,front.height);

for(var i=0; i<frontimage.data.length; i=i+4){

var line=Math.floor(i/(4*front.width));

line=line+20;

var backi=(line*back.width*4) + 80 + (i%(front.width*4));

if(frontimage.data[i]+frontimage.data[i+1]+frontimage.data[i+2]<50){
frontimage.data[i]=backimage.data[backi];

frontimage.data[i+1]=backimage.data[backi+1];

frontimage.data[i+2]=backimage.data[backi+2];

}

}
 front.getContext('2d').putImageData(frontimage,0,0);

}

【讨论】：