0

Is it possible for a div to have opaque/transparent text with a white background. (div1(+)

Basically where I can have another colored DIV (div2) behind the first div(div1) And the text will be the color of the div behind it (div2) purely through CSS without JS?.

Jonathan Lee
  • 11
  • 1
  • 6
  • may be refer to this : http://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css – Saagar Elias Jacky Apr 02 '15 at 16:56
  • do you want cut-out text? basically you see the background of the underlying div through the letters of the text on the top div? like this https://css-tricks.com/image-under-text/ – ferr Apr 02 '15 at 16:59
  • Is this what you are looking for? (read answers): http://stackoverflow.com/questions/13932946/transparent-text-with-white-background-with-css – Alvaro Menéndez Apr 02 '15 at 17:05

2 Answers2

3

Like this?

p{
  color: rgba(0,0,0,0.5);
}
<p>Hello World!</p>

Or like this? 

p{
  opacity: 0.5;
}
<p>Hello World!</p>

or like this?

p {
  position: relative;
  color: rgba(255,255,255,0.5);
  font-size: 30px;
}
p:before {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<p>Hello World!</p>
w3debugger
  • 2,097
  • 19
  • 23
  • I don't think this is what the OP asked. He want a text in a plain color background to be trasparent so you can see what is behind the plain color through the text – Alvaro Menéndez Apr 02 '15 at 17:03
  • Whatever he wants, he can achieve this by `rgba` or `opacity`. I don't think so that this can be done by any other method. – w3debugger Apr 02 '15 at 17:11
  • Yes I want say color:opacity() so only the text is transparent but not the entire div. therefore i can see through only the text, but the rest of the div is a solid color. – Jonathan Lee Apr 02 '15 at 17:34
0

If I read your question correctly, what you want to do is use the text punch through the first div and display the color or image from the second div behind it.

There is no way of doing this with CSS only. (At least to this day)

I think you might find this useful.

http://blog.ericzhang.com/punch-through-text-masks-with-css-and-html5/

mateostabio
  • 958
  • 8
  • 11