У меня есть элемент абзаца внутри 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,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>
Я хотел добавить это как комментарий к ответу 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.
Несчастливо, что это не работает, как вы могли ожидать. Другие стили имеют значение для наследования - поэтому почему непрозрачность?
Работает, если вы не делаете ничего сложного:
Создайте родительский DIV (или другой элемент блока) с шириной/высотой вам нужно и положение: относительное.
Создайте дочерний DIV с вашим значением прозрачности, шириной/высотой 100% и позиция: абсолютная (возможно, левая/верхняя: 0)
Пример:
<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>
просто, только вы делаете это, чтобы дать
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;
Проверьте этот пример для более
вы можете создать свой фильтр rgba здесь http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/