Text with background color

Question

I have a weird problem and honestly I have no idea how to do that.

I have a box with background image. Over the background image I have a lot of boxes with a background color and text. I would like the color of the text in every box to be transparent, so the color will be the part of the background image that text is above.

Here is an example: http://jsfiddle.net/wjdwohdd/5/

Instead of the green background, it should be an image.

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

If I set color: transparent, the text's color becomes red and I am not sure even if it is possible to be the background image.

EDIT: I updated my jsfiddle. I would like the color of the text to be the part of the image that is behind the text.

Why do you want to make the text invisible? Just don't write it... — Itay Gal, Mar 19 '15 at 09:54
What is your expected output?? You can show it by adding image in question. — Manwal, Mar 19 '15 at 09:55
What you want is to make a holes in your boxes in the shape of the text so you can see the background image through them? I don't think that's possible. — Zemljoradnik, Mar 19 '15 at 09:58
No... I don't want to be invisible... I want to be green in my previous example. But not to set color: green, but to reuse the color from the parent green background. It looks strange, my real idea is green backgrund to be an image. I updated my jsfiddle. — user1107922, Mar 19 '15 at 10:00
This Topic should help: [http://stackoverflow.com/questions/11807286/how-to-make-div-background-color-transparent-in-css][1] [1]: http://stackoverflow.com/questions/11807286/how-to-make-div-background-color-transparent-in-css — Zer0x, Mar 19 '15 at 10:01
If you want to text to be invisible just use font-size:0; and when you want it to show just increase size . — Roli Agrawal, Mar 19 '15 at 10:06

score 2 · Answer 1 · answered Mar 20 '15 at 17:23

You can do that, but you need a pretty new property: mix-blend-mode.

Even though it, support is growing: it has been supported in FF for a while, and it is supported in the latest Chrome.

To get it, you need a gray text on a red background, and set the mode to hard-light

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

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

score 0 · Answer 2 · answered Mar 19 '15 at 10:06

i would suggest to use a color for the font in the parent element and then in the child element inherit the font color, not sure what you really want

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

otherwise use a rgb color for the font in the child element with a transparency then your background will be visible for example something like color: rgba(0, 0, 0, 0.5);

score 0 · Answer 3 · answered Mar 20 '15 at 09:26

I dont know whether it is possible to do using CSS. Only solution that I can come up with is using Canvas. But it is too complicated and lot of coding. back canvas contains the image that you want to show and in front canvas you do background coloring and letter writing. Here goes the code:

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);

}

Text with background color

3 Answers3

HTML

CSS

JavaScript