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

Я хочу установить непрозрачность фона 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)

также.

94
css internet-explorer-8 opacity

7 ответов

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

200

это просто, только вы должны сделать, это дать

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/

20

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

6

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

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

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

1

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

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

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

0