how can i set div opacity only not text?

Question

I want to use opacity only for div not on the text. i use some code for div opacity but it show me text opacity also. i do not want to show the text opacity. my code is here.

.opabenner {
width:569px;
height:100px;
float:left;
position:absolute;
background:#06F;
top:587px;
filter:alpha(opacity=60); /* IE */
   -moz-opacity:0.6; /* Mozilla */
   opacity: 0.6; /* CSS3 */
z-index:9999;
  }
 .tit {
position: absolute;
font-size: 20px;
color: #FFF;
text-align: center;
padding: 5px;
width: 580px;
  }


  <div class="opabenner"> 
         <h1 class="tit">Step inside love in 2014 and join today for FREE!</h1>
    </div>

Karuppiah RK · Answer 1 · 2014-01-29T07:32:33.443

9

use background: rgba(0,0,0,.5); remove opacity: 0.6;

Sample Demo

edited Jan 29 '14 at 07:32

answered Jan 29 '14 at 07:21

Karuppiah RK

3,894
9
40
80

yes thanks it's working. but is it works in all the browser? – Rubel Amin Jan 29 '14 at 07:25
@user3197474 : i think ie does not supports... – Karuppiah RK Jan 29 '14 at 07:28
1

google is your friend: http://css-tricks.com/rgba-browser-support/ – DA. Jan 29 '14 at 07:28
Also: http://caniuse.com/css3-colors – Tieson T. Jan 29 '14 at 07:30

Nabil Kadimi · Answer 2 · 2014-01-29T07:26:14.503

0

Use RGBA colors for the container

p{
    color: red;
}

#transparent{
    background-color: rgba(0, 0, 0, .1); /* 0.1 alpha = 10% opacity */
}

Preview: http://jsfiddle.net/EfDZC/

edited Jan 29 '14 at 07:26

answered Jan 29 '14 at 07:20

Nabil Kadimi

10,078
2
51
58

how can i set div opacity only not text?

2 Answers2