Непрозрачность фона div, не затрагивая содержащийся элемент в IE 8?

Ответ 1

Стиль opacity влияет на весь элемент и все внутри него. Правильный ответ на это - использовать вместо этого цвет фона rgba.

CSS довольно прост:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

... где первые три цифры являются красными, зелеными и синими значениями для вашего цвета фона, а четвертым является значение альфа-канала, которое работает так же, как значение opacity.

Смотрите эту страницу для получения дополнительной информации: http://css-tricks.com/rgba-browser-support/

С другой стороны, это не работает в IE8 или ниже. На странице, на которую я ссылался, также перечислены некоторые другие браузеры, в которых она не работает, но они все очень старые; все браузеры, используемые в настоящее время, за исключением IE6/7/8, будут работать с цветами rgba.

Хорошей новостью является то, что вы можете заставить IE работать и с этим, используя взломанный CSS3Pie. CSS3Pie добавляет ряд современных функций CSS3 к более старым версиям IE, включая цвета фона rgba.

Чтобы использовать CSS3Pie для фона, вам нужно добавить конкретное объявление -pie-background в свой CSS, а также стиль PIE behavior, поэтому ваша таблица стилей будет выглядеть следующим образом:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

Надеюсь, что это поможет.

[EDIT]

Для чего стоит, как уже упоминалось, вы можете использовать стиль IE filter с ключевым словом gradient. Решение CSS3Pie действительно использует эту же технику за кулисами, но устраняет необходимость бесполезного взаимодействия с фильтрами IE, поэтому ваши таблицы стилей намного чище. (он также добавляет целую кучу других приятных функций, но это не относится к этому обсуждению)

Ответ 2

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

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

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

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

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

Ответ 3

opacity в родительском элементе устанавливает его для всего дерева sub DOM

Вы не можете установить непрозрачность для определенного элемента, который не будет каскадом для потомков. Это не так, как работает CSS opacity.

Что вы можете сделать, так это иметь два родственных элемента в одном контейнере и установить прозрачное одно позиционирование:

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

тогда вы должны установить прозрачный position: absolute/relative, чтобы его содержимое было передано над ним.

rgba может делать прозрачность фона цветными фонами

rgba настройка цвета на элементе background-color, конечно же, будет работать, но это ограничит использование только цвета в качестве фона. Никаких изображений, которых я боюсь. Конечно, вы можете использовать градиенты CSS3, но если вы укажете цвета остановки градиента в rgba. Это также работает.

Но имейте в виду, что rgba может не поддерживаться вашими требуемыми браузерами.

Функциональные возможности диалогового диалога без предупреждения

Но если вы замаскируете всю страницу, это обычно делается путем добавления отдельного div с этим набором стилей:

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

Затем, когда вы показываете контент, он должен иметь более высокий z-index. Но эти два элемента не связаны с братьями и сестрами. Они просто отображаются так, как должны быть. Один над другим.

Ответ 4

Возможно, есть более простой ответ, попробуйте добавить любой цвет фона, который вам нравится в коде, например background-color: #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

Ответ 5

Как насчет этого подхода:

	<head>
	<style type="text/css">
		div.gradient {
			color: #000000;
			width: 800px;
			height: 200px;
		}
		div.gradient:after {
			background: url(SOME_BACKGROUND);
			background-size: cover;
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:inherit;
			height:inherit;
			opacity:0.1;
		}
	</style>
	</head>
	<body>
		<div class="gradient">Text</div>
	</body>

Ответ 6

Попробуйте установить z-индекс выше в содержащемся элементе.

Ответ 7

Это влияет на все дочерние div, когда вы используете функцию непрозрачности с позициями, отличными от абсолютных. Таким образом, еще один способ добиться этого - не ставить divs друг в друга, а затем использовать абсолютную позицию для div. Не используйте любой цвет фона для верхнего div.