Make paragraph background transparent w/o text being transparent

Question

How can I make my background transparent without the text being transparent?

    p{
  font-family:sans-serif, Times;
  color:#666666;
  opacity:0.5;
  background-color:#00C72E;
  width: 50%;
  font-size:16px;
  margin:0px;

}

score 1 · Answer 1 · answered Mar 18 '14 at 21:18

1

You're going to want to use rgba colors to accomplish this. Something like this should work for you:

  p {
    font-family:sans-serif, Times;
    color:#666666;
    background-color:rgba(0,199,46,.5);
    width: 50%;
    font-size:16px;
    margin:0px;
 }

Here is a fiddle: http://jsfiddle.net/Ty632/

answered Mar 18 '14 at 21:18

Dryden Long

10,072
2
35
47

IE8 does not support rgba(). Maybe there is a trick for IE8: http://css-tricks.com/rgba-browser-support/ – JohanVdR Mar 18 '14 at 21:23
@sigma, correct, IE8 and below do not support rgba. Using a .png or .gif image with transparency is the most common work-around for that limitation. Although, with MS dropping support for WinXP, I think we're pretty close to considering IE8 a thing of the past. – Dryden Long Mar 18 '14 at 21:25
Rgba will be a great trick for making transparet bavkground only by preserving content of inside ithis div. – M K Garwa Mar 18 '14 at 21:27

score 0 · Answer 2 · answered Mar 18 '14 at 21:22

opacity:0.5; changes the opacity of the container and the content within it.

You can use and RBGA background color (background-color:rgba(0,199,46,0.5);), which is and RGB value with an opacity element at the end, but it isn't very backwards compatible. More information on RGBA colors , including a browser compatibility chart, can be found here: http://css-tricks.com/rgba-browser-support/

Another option is to use a semi-transparent PNG as a background, which will work on most modern web-browsers. You can find a browser compatibility chart for semi-transparent PNG images here: http://caniuse.com/png-alpha

Make paragraph background transparent w/o text being transparent

2 Answers2