аватар |

Статьи / 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>

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


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



Распечатать
Похожие статьи
08 июня 2017 12:54 Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS?
05 сентября 2013 16:22 Как заменить изображение при наведении на него курсора? CSS
08 апреля 2013 14:20 Анимированная выдвижная боковая блок-панель на CSS
22 ноября 2013 13:57 Как правильно создать DIV с height в 100%? CSS
17 июля 2015 12:15 Как создать красивую всплывающую подсказку на сайте с помощью CSS?


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