CSS: проблема непрозрачности

Question

Хорошо, поэтому на моей странице я показываю фоновое изображение с этим 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.

Существует объяснение того, как сделать это обратно совместимым способом . (Раскрытие: Мой сайт)

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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