2013-11-21 4 views
2

У меня есть два divs, внешний и внутренний div. У меня есть фоновое изображение, а внешний div имеет набор непрозрачности, но я просто не могу заставить внутренний div не наследовать непрозрачность внешнего div. я хотел бы, чтобы внутренний div был сплошным цветом.Прозрачность CSS div только на внешнем div

мой код ниже и jsfiddle здесь: http://jsfiddle.net/3TK3U/

<style type="text/css"> 

body 
{ 
background-image:url('http://media-bubble.info/images/layout/background.png'); 
} 

.outsideBox { 
    width:70%; 
    height:200px; 
    background-color: #ffffff; 
    opacity:0.7; 
    filter:alpha(opacity=70); 
    text-align:center; 
} 

.insideBox { 
    width:40%; 
    height:80px; 
    background-color: #999; 
    z-index:999999; 
} 

</style> 


<div id="Introduction" class="outsideBox"> 
    <div id="Introduction" class="insideBox">This is the inside box which should not inherit transparancy</div> 
</div> 
+0

необходимости идентификаторов быть уникальным ... – lifetimes

+1

возможно дубликатом * * [Как сделать фон DIV прозрачным только с помощью CSS] (http://stackoverflow.com/questions/7565384/how-to-make-the-background-div-only-transparent-using-css) ** – lifetimes

+0

Вы не может. Дети наследуют параметры непрозрачности. – Turnip

ответ

17

Попробуйте использовать background-color: rgba(255,255,255,0.7); , без помутнения или фильтр, который должен сделать фон прозрачным, но не влияет на содержимое элемента.

+0

Я не знаю, почему он не сделал это как ответ, но это сработало для меня, спасибо! – hjavaher

+0

rbga не работает в IE8 – xyz

+0

Спасибо за ваш ответ, помогите мне тоже –

0

Попробуйте использовать

background-color: rgba(255,255,255,0.7);

, без помутнения или фильтра, который должен сделать фон прозрачным, но не влияет на содержимое элемента

Смежные вопросы