как я могу установить только непрозрачность div, а не текст?

Я хочу использовать непрозрачность только для div, а не для текста. Я использую код для непрозрачности div, но он также показывает непрозрачность текста. я не хочу показывать непрозрачность текста. мой код здесь.

.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>

html css opacity
person Rubel Amin    schedule 29.01.2014    source источник

Ответы (2)


arrow_upward
8
arrow_downward

использовать background: rgba(0,0,0,.5); удалить opacity: 0.6;

Образец демонстрации

person Karuppiah RK    schedule 29.01.2014
comment
да, спасибо, все работает. а во всех ли браузерах работает? - person Rubel Amin; 29.01.2014
comment
@ user3197474: я думаю, т.е. не поддерживает ... - person Karuppiah RK; 29.01.2014
comment
Google - ваш друг: css-tricks.com/rgba-browser-support - person DA.; 29.01.2014
comment
Также: caniuse.com/css3-colors - person Tieson T.; 29.01.2014

arrow_upward
0
arrow_downward

Используйте цвета RGBA для контейнера

p{
    color: red;
}

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

Предварительный просмотр: http://jsfiddle.net/EfDZC/

person Nabil Kadimi    schedule 29.01.2014