Другие языки программирования и технологии

Прозрачность CSS.

есть дива {qwerty} есть цсс для дивы filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; мне нужно прозрачность применить только для фона, но прозрачность присваивается абсолютно всему, что есть в диве, как можно выйти из ситуации?
background-color: rgba(0, 50, 50, 0.7);

где 0,7 - уровень прозрачности
Ильяс Базарбаев
Ильяс Базарбаев
14 578
Лучший ответ
Прозрачность применяется ко всему содержимому блока.
Поэтому надо фон вынести в отдельный блок.
Самый универсальный способ — абсолютное позиционирование блока с фоном и z-index: -1;
Основному блоку надо поставить position: relative; чтобы позиционировать и "растягивать" блок с фоном по нему. (В "стандартных" браузерах left: 0; top: 0; right: 0; bottom: 0; "растянет" абсолютно позиционированный блок с фоном по размерам родительского блока)
В специальных контекстных комментариях код для IE<9 (IE 8 "понимает" псевдоэлементы :before и :after, но фильтры для них применять не умеет) . Потому для них "специальный" блок #ie_after вместо псевдоэлемента.
Для "стандартных" браузеров блок с фоном ставится с помощью псевдоэлементов :before, или :after (просто чтобы лишний HTML не городить — ибо лишний код только для оформления — это плохо, а так можно и блок поставить)

rgba — хорошо для одноцветного фона, но в старых ослах не работает без скриптов.

<style type="text/css">
#block {
position: relative;
z-index: 0; /* добавить размеры, отступы и т. д. - что нужно */
}
#block:after, #ie_after {
content: '';
display: block;
background: url('картинка. jpg') /* позиция и no-repeat по вкусу */;
position: absolute;
z-index: -1;
left: 0;
top: 0;
right: 0;
bottom: 0;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>
<!--[if lt IE 9]>
<style type="text/css">
#ie_after {
width:100%;
height: 100%;
*height: 200px /* заменить на нужное - для IE6 надо обязательно указать высоту блока с картинкой */;
filter:progid:DXImageTransform.Microsoft Alpha(opacity=50);
}
#block:after { display:none; }
</style>
<![endif]-->

...

<div id="block">
<p>Текст (непрозрачный) и т. д. — любой контент и любые блоки</p>
<!--[if lt IE 9]><div id="ie_after"></div><![endif]-->
</div>
Михаил Латута
Михаил Латута
60 969
начать не с CSS, а с HTML..:)))
Евгений Лилица
Евгений Лилица
21 019
Прозрачность однотонного фона - именно фона, без содержимого (цсс3+ие фильтр) :

.someBlock {
background: rgba( 255, 0, 0, 0.5);
//background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000);
zoom: 1;
}
Ну нах*ра себе мозг е*ать, когда в jquery можно прописать прозрачность любому элементу одной командой и для всех браузеров..
AR
Azamat Rakishev
7 680
цвет фона задавай другим способом:
rgba (<красный>,<зеленый>,<синий>,<прозрачность>)
все числа в диапазоне от 0 до 255
RK
Roman Krinichny
773