0

Html::

<div id="Opacity"><span class="P">Here Is My P</span>

Css:

#opacity {
width:400px;
height:400px;
border:black 1px solid;
opacity:0.3;
background-color:black;
}

.P {
font-family:cursive;
font-size:24px;
color:white;
}

but Output word are also transparent.i want word will transparent but div become transparent Thanks

Joke_Sense10
  • 5,341
  • 2
  • 18
  • 22
Hashaam
  • 83
  • 1
  • 1
  • 9

1 Answers1

3

opacity changes the translucency of the whole element.

If you want a translucent background, then set the background to an rgba() colour value or use a translucent background image.

background-color: rgba(0, 0, 0, 0.3);

See some guidance on compatibility measures.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    as fallback for older IE's user .class { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); zoom: 1; } as shown [here](http://css-tricks.com/rgba-browser-support/) – ZimTis Nov 08 '13 at 10:07
  • http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text – Tomas Ramirez Sarduy Nov 08 '13 at 10:08