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

Question

Я хочу установить непрозрачность фона div, не затрагивая содержащийся элемент в IE 8. У меня есть какое-либо решение, и я не отвечаю, чтобы установить 1 X 1 .png изображение и установить непрозрачность этого изображения, потому что я использую динамическую непрозрачность и цвет Администратор может изменить это

Я использовал это, но не работает в IE 8

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

и

rgba(0,0,0,0.3)

также.

Answer 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, поэтому ваши таблицы стилей намного чище. (он также добавляет множество других полезных функций, но это не имеет отношения к этому обсуждению)

Answer 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/

Answer 3

opacity в родительском элементе устанавливает его для всего подчиненного дерева 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. Но эти два элемента не связаны с точки зрения братьев и сестер или что-то еще. Они просто отображаются так, как они должны быть. Один за другим.

Answer 4

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

Answer 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>

Answer 6

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

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

Answer 7

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