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




центру экран (7)

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

также.


Answers

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


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

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

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

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

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

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

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

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


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


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

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

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

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/


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


Одна вещь, чтобы понять, что первое определенное фоновое изображение является самым верхним в стеке. Последнее определенное изображение будет самым нижним. Это означает, что для получения фонового градиента позади изображения вам понадобятся:

  body {
    background-image: url("http://www.skrenta.com/images/.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/.jpg"), -moz-linear-gradient(top, red, yellow);
  }

Вы также можете определить фоновые позиции и размер фона для изображений. Я собрал сообщение в блоге о некоторых интересных вещах, которые вы можете сделать с градиентами CSS3





css internet-explorer-8 opacity