аватар Автор: Сергей Касаткин | 31 января 2013 19:43

Статьи / CSS /

Как сделать элемент прозрачным и убрать прозрачность CSS?

1. Как сделать элемент прозрачным?
2. Как убрать прозрачность дочернего элемента?
3. Пример

Для того, чтобы сделать элемент прозрачным, следует использовать CSS. Для стилей есть полезное свойство opacity, в котором остаётся лишь указать степень прозрачности. Где, как правило 1 или 100 - элемент не прозрачен, а 0.1 или 10 - это прозрачный элемент. Почему два значения? Потому что для IE (Internet Explorer), равно как и для других браузеров, прописываются другие свойства, и у IE прозрачность измеряется в других значениях.

Полупрозрачный элемент


Соответственно, чтобы сделать элемент полупрозрачным, нужно задать для opacity значение 0.5 или 50.

Код CSS

filter:alpha(opacity=50);  /*  для IE 5.5+ */
-moz-opacity:0.5;  /* для Mozilla 1.6 и ниже */
-khtml-opacity:0.5;  /* для Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */


Как убрать прозрачность дочернего элемента?


Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность), то прописываете ему следующие характеристики, где значение прозрачности равно 1 или 100:

Код CSS

filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity: 1;

Не забываем указывать все 4 свойства, так как в противном случае действие будет не кроссбраузерно, то есть будет работать не во всех браузерах.

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

.opacity :hover {
filter:alpha(opacity=50);  /*  для IE 5.5+ */
-moz-opacity:0.5;  /* для Mozilla 1.6 и ниже */
-khtml-opacity:0.5;  /* для Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
}



Рассмотрим пример


Создаём файл index.html

<html>
<head>
<title>
Название странички
</title>

<style>
.opacity:hover {
filter:alpha(opacity=50);  /*  для IE 5.5+ */
-moz-opacity:0.5;  /* для Mozilla 1.6 и ниже */
-khtml-opacity:0.5;  /* для Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
}

.square {
width: 100px;
height: 100px;
background: black;
}
</style>

</head>
<body>
<h1>Полупрозрачность элемента</h1>
Делаем изображение полупрозрачным при наведении!

<div class="square opacity"></div>

</body>
</html>

Демонстрация Скачать исходники


Спасибо за внимание!
 



Похожие статьи


Комментарии к статье (vk.com)