Задайте непрозрачность родительских divs, но не затрагивайте дочерние элементы HTML

У меня есть элемент абзаца внутри div. Div имеет непрозрачность 0,3, а абзац имеет непрозрачность 1.

Когда я показываю элементы, кажется, что абзац прозрачен, например, имеет непрозрачность 0,3.

Есть ли способ сделать абзац внутри div иметь полную непрозрачность? Может быть, я могу установить для этого значение CSS?

<div style="opacity: 0.3; background-color: red;">
   <p style="opacity: 1;">abcde</p>
</div>

Ответы

Ответ 1

Вы не можете, уровень непрозрачности относительно родительской непрозрачности всегда. Таким образом, 1,0 внутри 0,3 будет составлять 100% от 0,3, что составляет 0,3, а 0,5 внутри 0,3 составит 50% от 0,3, что составляет 0,15. Если вы используете непрозрачность для цвета фона, вы можете указать цвет, используя метод RGBA, чтобы красный был непрозрачным, а не содержимым (и, следовательно, абзацем внутри него).

<div style="background-color: rgba(255, 0, 0, 0.3);">
   <p>abcde</p>
</div>

Смотрите здесь.

Ответ 2

Я хотел добавить это как комментарий к ответу animuson, но я не могу оставлять комментарии, поэтому я просто опубликую его как "ответ". RGBa отлично работает, но только в новых браузерах. Даже IE8 не поддерживает его, что является серьезным препятствием, поскольку многие, многие люди все еще используют IE8.

.color-block {
/* The Fallback Color */
background: rgb(200, 54, 54);

/* The Important Bit - Alpha Transparency */ 
background: rgba(200, 54, 54, 0.5); 
}

Подробнее читайте http://css-tricks.com/examples/RGBaSupport/.

Я обычно обойти проблему полностью, используя два div. Первый для прозрачного фона и второй для контента, расположенный прямо над первым. Это не опрятно, это не приятно, и я не могу утверждать, что я доволен этим, но... он даже работает в IE7 и IE6.

Ответ 3

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

Работает, если вы не делаете ничего сложного:

  • Создайте родительский DIV (или другой элемент блока) с шириной/высотой вам нужно и положение: относительное.

  • Создайте дочерний DIV с вашим значением прозрачности, шириной/высотой 100% и позиция: абсолютная (возможно, левая/верхняя: 0)

  • Создайте еще один дочерний DIV с вашим контентом и непрозрачность, установленную на что бы вы ни пожелали.

Пример:

<div style="width:200px;height:100px;position:relative">
    <div style="opacity:.03;background-color:blue;width:100%;height:100%;position:absolute;left:0;top:0"></div>
    <div style="opacity:.09">This is my content</div>
</div>

Ответ 4

просто, только вы делаете это, чтобы дать

background: rgba(255,0,0,0.3)

& для IE используйте этот фильтр

background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000)"; /* IE8 */    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000);   /* IE6 & 7 */      
zoom: 1;

Проверьте этот пример для более

http://jsfiddle.net/epmcM/

вы можете создать свой фильтр rgba здесь http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/