аватар |

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

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


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



Распечатать
Похожие статьи
31 мая 2017 18:46 Как создать индикатор (полосу) прокрутки страницы на CSS3?
06 декабря 2013 15:06 Как сделать обтекание изображения (картинки) текстом средствами CSS?
16 октября 2014 12:40 Как закрепить футер или подвал внизу web-страницы CSS?
19 сентября 2014 17:20 Как изменить вид курсора мыши в CSS
28 ноября 2014 12:57 Плавное увеличение изображения при наведении CSS


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