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


112

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

также.


Вы не можете этого сделать. Непрозрачность свойства влияет на все содержимое вашего элемента (другие элементы html + текст). Но я не понимаю, почему вы не хотите использовать png. Вам нужно будет только изменить изображение вместе с изменением css (потому что я думаю, у вас есть другой css, который может быть переключен администратором)
Elorfin

@Corum: Как ты ошибаешься (как и я). Это возможно. Проверьте это сообщение в блоге. robertnyman.com/2010.01.11/… Невероятно умно.
Роберт Коритник

Только что опубликовано здесь: < stackoverflow.com/a/11755175/1491212 > Надеюсь, это может помочь!
Armel Larcier 01

Ответы:


236

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стиль PIE , чтобы ваша таблица стилей выглядела следующим образом:

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

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

[РЕДАКТИРОВАТЬ]

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


1
молодец! Это мне очень помогло.
Jordan Starrk

22

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

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/


1
Какое отношение градиенты имеют к непрозрачности? : S
Роберт Коритник

@ Роберт Коритник: см. Мою версию этого ответа для лучшего объяснения - stackoverflow.com/questions/5160419/… также здесь: stackoverflow.com/questions/4788564/…
30dot

@robert, это единственный фильтр IE, доступный в сети, он дал тот же эффект, что и rgba, и я не эксперт по фильтрам.
sandeep

@Robert, это просто работает;) см. Эту ссылку - @sandeep Я исправил код фильтра, чтобы добавить необходимые ингредиенты (прозрачный фон и hasLayout), изменить порядок фильтров .. не стесняйтесь откатывать, если вы не согласны;)
clairesuzy

1
Фильтры @sandeep не будут работать без hasLayout, у вас может быть другое свойство hasLayout в вашем коде, возможно, ширина? Я работаю одной рукой ... сломал себе запястье, отсюда и мои медленные ответы, но вот jsfiddle с соответствующим кодом IE в условном комментарии для сравнения двух методов
clairesuzy

9

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

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

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

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


это правильный ответ, работает даже с bg-изображениями
Ботя Флорин

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>



0

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


0

Используйте RGBA или, если вы шестнадцатеричный код, измените его на rgba. Не нужно делать какие-то предварительные элементы css.

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

ИЛИ

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.