CSS: Непрозрачность Выпуск

Question

Ok, так что в моей странице я показываю фоновое изображение с помощью CSS:

.heroarea { 
    background:url(/static/images/mrd_hero_01.jpg) no-repeat; 
    height:450px; 
} 

и копии помещенной над ней и контейнер копия находится в еще эти стили:

.main-panel { 
    position: absolute; 
    top: 130px; 
    left: 380px; 
    background: #fff; 
    width: 560px; 
    height: 340px; 
    padding: 30px 30px 20px 30px; 
    /* CSS3 standard */ 
    opacity:0.5; 
    /* for IE */ 
    filter:alpha(opacity=50); 
} 
.main-panel h1 { 
    background: transparent; 
    color:#39372f; 
    text-align: center; 
    /* CSS3 standard */ 
    opacity:1; 
    /* for IE */ 
    filter:alpha(opacity=100); 
} 

Как правило, все как ожидается. То есть, изображение показывает, где я ожидаю, что он покажет. на главной панели отображается белая задняя поверхность с прозрачным фоном. Однако текст в теге h1 также прозрачен. Я вижу изображение снизу. Как я могу сделать это так, чтобы содержимое тега h1 не было непрозрачным?

Спасибо!

Answer 1

Непрозрачность применяется к элементу, а не к фону.

Вам либо нужно использовать полупрозрачное изображение, либо цвет фона rgba.

Существует explanation about how to do this in a backwards compatible way. (Раскрытие информации: Мой сайт)

Answer 2

Вы должны переместить его за пределы своего родителя .main-panel. Невозможно переопределить 50% непрозрачность, которая применяется там.

В качестве альтернативы, если вы используете непрозрачность 50%, чтобы сделать фоновое изображение mrd_hero_01.jpg прозрачным, вы можете преобразовать его в .png с непрозрачностью 50%, а затем вам не нужно будет устанавливать непрозрачность на .main-panel.

Answer 3

Использовать rgba и/или прозрачным png. С другой стороны, переместить содержимое в отдельный родственный DIV в качестве фона:

<div id="parent"> 
    <div id="opacity"></div> 
    <div id="child">text</div> 
</div> 

Answer 4

Если вы используете прозрачность на блочном элементе это делает дочерний элемент внутри прозрачной, как well.This то, как CSS работает! Я не думаю, что есть способ вырваться из него. Что вы можете сделать, чтобы полностью позиционировать h1, не сделав его ребенком или не используя полупрозрачное изображение.

Answer 5

Похоже, что ваш текст является дочерним элементом .main-panel. Это займет 50% непрозрачности. Даже если вы заявляете, что текст непрозрачность 100% будет делать только 100% от 50%. Вам нужно будет сложить его вне панели .main и поместить его сверху.