Как сделать фоновый DIV прозрачным только с помощью CSS

Я использую CSS attrubutes:

filter: alpha(opacity=90);

opacity:.9;

чтобы сделать DIV прозрачным, но когда я добавляю еще один DIV внутри этого DIV, он также делает его прозрачным.

Я хочу сделать внешний (фоновый) DIV только прозрачным. Как?

Ответ 1

Fiddle: http://jsfiddle.net/uenrX/1/

Свойство непрозрачности внешнего DIV не может быть отменено внутренней DIV. Если вы хотите добиться прозрачности, используйте rgba или hsla:

Внешний div:

background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/

Внутренний div:

background-color: #FFF; /* Background white, to override the background propery*/

РЕДАКТИРОВАТЬ
Поскольку вы добавили filter:alpha(opacity=90) к своему вопросу, я предполагаю, что вы также хотите работать с решением для (более старых версий) IE. Это должно работать (префикс -ms- для новейших версий IE):

/*Padded for readability, you can write the following at one line:*/
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1,
    startColorStr="#E6FFFFFF",
    endColorStr="#E6FFFFFF");

/*Similarly: */
filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1,
    startColorStr="#E6FFFFFF",
    endColorStr="#E6FFFFFF");

Я использовал фильтр Gradient, начиная с тех же start- и end-color, чтобы фон не показывал градиент, а плоский цвет. Формат цвета находится в формате ARGB hex. Я написал фрагмент кода JavaScript для преобразования относительных значений непрозрачности в абсолютные значения альфа-шестнадцатеричного значения:

var opacity = .9;
var A_ofARGB = Math.round(opacity * 255).toString(16);
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB;
else if(!A_ofARGB.length) A_ofARGB = "00";
alert(A_ofARGB);

Ответ 2

У меня была та же проблема, это решение, с которым я столкнулся, что намного проще!

Сделайте небольшое 1px x 1px прозрачное изображение и сохраните его как .png файл.

В CSS для вашего DIV используйте этот код:

background:transparent url('/images/trans-bg.png') repeat center top;

Не забудьте изменить путь к вашему прозрачному изображению.

Я думаю, что это решение работает во всех браузерах, возможно, за исключением IE 6, но я не тестировал.

Ответ 3

Просто не включайте цвет фона для этого div, и он будет прозрачным.

Ответ 4

Это невозможно, непрозрачность наследуется дочерними узлами, и вы не можете этого избежать. Чтобы иметь только родительский прозрачный, вам нужно играть с позиционированием (абсолютным) элементов и их z-index

Ответ 5

Я не знаю, изменилось ли это. Но по моему опыту. вложенные элементы имеют максимальную непрозрачность, равную отцам.

Что означает:

<div id="a">
<div id="b">
</div></div>

Div#a has 0.6 opacity
div#b has 1 opacity

Имеет #b в пределах #a, тогда максимальная непрозрачность всегда равна 0.6

Если #b будет иметь 0,5 непрозрачность. При повторности это будет 0,6 * 0,5 == 0.3 непрозрачность

Ответ 6

.modalBackground
    {

        filter: alpha(opacity=80);
        opacity: 0.8;
        z-index: 10000;
    }

Ответ 7

background-image:url('image/img2.jpg'); 
background-repeat:repeat-x;

Используйте некоторое изображение для внутреннего изображения и используйте это.

Ответ 8

<div id="divmobile" style="position: fixed; background-color: transparent;
    z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">