CODEWITHSUNDEEP
htmlcss
user1107922
user1107922

Reputation: 610

Text with background color

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.

Upvotes: 2

Views: 406

Answers (3)

vals
vals

Reputation: 64264

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>

Upvotes: 2

Sushovan
Sushovan

Reputation: 343

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

}

Upvotes: 0

SED
SED

Reputation: 110

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

Upvotes: 0

Related Questions