Проблемы прозрачности CSS во вложенных элементах

Question

эй, интересно, кто-нибудь из вас сталкивался с подобной проблемой?Я работаю над рекламным разделом веб-страницы, и у него есть действительно классная справочная информация, которую я хотел бы продолжить в разделах элементов, поэтому у меня есть поле, в котором есть поле для RSS-рассылки обновлений, сделанных на веб-сайте, а затемУ меня есть ящик для рекламы.вот мой html:

<div class="side">
  <div id="ad">
    bla
  </div>
  <div id="rss_news">
    double bla
  </div>
</div>

и css:

.side {
  float: left;
  background-color: black;
  width: 300px;
  min-height: 710px;
  padding: 0 0 0 0px;
  margin-top: 25px;
  border: 1px solid white;
  border-radius: 8px 8px 8px 8px;
  opacity: 0.3;

 }

 #ad {
   border: 1px solid blue;
   height: 320px;
   max-height: 350px;
   margin: 15px;
   opacity: 1;

 }

 #rss_news {
   border: 1px solid yellow;
   height: 320px;
   max-height: 350px;
   margin: 15px; 
   opacity: 1;

 }

, как вы можете видеть и как я ожидал, боковой класс имитирует свои атрибуты на тех, которые вложены в него.Есть ли способ, которым я мог бы как-то сказать другим тегам id игнорировать эту непрозрачность?

спасибо заранее: D

Answer 1

Невозможно заставить потомков игнорировать родительские opacity.

. Вы можете использовать rgba / hsla цвета, чтобы получить частично прозрачный фон, не влияя на видимость детей.Пример:

.side {
   background-color: rgba(0,0,0, 0.3);
}

Демонстрация: http://jsfiddle.net/ywQy5/

См. Также:

• MDN: hsla цвета
• MDN: rgba цвета

Answer 2

Вы можете использовать свойство css3 rgba для этого, а для IE вы можете использовать IE filter. Напишите так:

    .side{
      background-color: rgba(0,0,0, 0.5);
      background: transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE*/      
      zoom: 1;
    }