HTML

Question

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

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

而不是绿色背景，它应该是一个图像。

<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。我希望文本的颜色是文本背后的图像的一部分。

Answer 1

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

即便如此，支持也在增长：FF已经支持了一段时间，并且最新的Chrome支持它。

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

＆＃13;

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

＆＃13;

<div class="test">TESTING</div>

＆＃13;

Answer 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）;

Answer 3

我不知道是否可以使用CSS。我能想出的唯一解决方案是使用Canvas。但它太复杂，编码很多。 back 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);

}

带有背景颜色的文本

3 个答案:

HTML

CSS

的JavaScript