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

Я хочу установить непрозрачность фона div, не затрагивая содержащийся элемент в IE 8. есть какое-либо решение, а не ответ на комплект 1 х 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)

также.

7 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 на родительском элементе устанавливает его для всего дерева 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 может не поддерживаться вашим необходимости броузеры.

Alert-free модальное диалоговое окно функции

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

0