аватар |

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

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


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



Распечатать
Похожие статьи
19 сентября 2014 17:20 Как изменить вид курсора мыши в CSS
22 ноября 2013 13:57 Как правильно создать DIV с height в 100%? CSS
06 декабря 2013 15:06 Как сделать обтекание изображения (картинки) текстом средствами CSS?
05 сентября 2013 16:22 Как заменить изображение при наведении на него курсора? CSS
27 ноября 2013 20:20 Как сделать элемент чёрно-белым и обратно цветным средствами CSS?


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