2013-12-17 7 views
1

У меня есть этот CSS код:CSS наложение сделать Backgroud непрозрачный

.overlay { 
    background:#666666; 
    opacity:0.7; 
    filter: alpha(opacity=70); 
    position:fixed; 
    width:100%; 
    height:100%; 
    text-align:center; 
    top:0px; 
    left:0px; 
    z-index:1000; 
} 

, что делает мой ДИВ подходит всю страницу и непрозрачного

вот мой HTML:

<div id="overlay" class="overlay"> 
    <img src="http://www.domain.com/images/loading.gif" alt="Loading" width="25%" style="margin-top:5%;" /> 
    <br /> 
    <h1>Loading...</h1> 
</div> 

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

http://jsfiddle.net/4rvrt/

+0

Я не понимаю, что вы подразумеваете под «не непрозрачным вообще». Вы утверждаете, что хотите, чтобы фон был прозрачным, но img и h1 были полностью непрозрачными (вообще не просматривайте)? Или вы действительно говорите, что хотите, чтобы img и h1 были полностью прозрачными? –

+2

Непрозрачность родителя затронет всех детей. Попробуйте использовать альфа-прозрачность: 'background: rgba (0,0,0,0.4);' – davidpauljunior

ответ

0

Как davidpauljunior предложить вам придется удалить явное объявление непрозрачности в вашем CSS и сделать фон: RGBA (0,0,0,0.4); в css, чтобы дать только нижнюю непрозрачность фона div. В вашем примере img и header являются дочерними элементами фонового div и поэтому будут иметь ту же явную непрозрачность, что и div фона, и будут отображаться серым, а не черным. Для того чтобы gif имел прозрачный фон вместо белого, вы должны убедиться, что сам gif имеет прозрачный фон при сохранении, и я рекомендую поместить его на более высокий индекс z, так что его альфа-канал не может вмешиваться в фолд «div alpha» ,

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