Функция opacity
Функцията opacity позволява
да се променя прозрачността на фоново изображение.
Стойност 100% или 1 оставя
изображението с оригиналната му прозрачност.
Стойност 0 означава,
че изображението ще стане напълно прозрачно.
Всяко число в
този диапазон задава частична прозрачност на фона.
Отрицателна стойност не може да се задава.
По подразбиране стойността е 1.
Синтаксис
селектор {
filter: opacity(число);
}
Пример
Нека зададем прозрачност на нашето изображение
50%:
<div id="elem"></div>
#elem {
filter: opacity(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
А сега нека зададем прозрачност
100%:
<div id="elem"></div>
#elem {
filter: opacity(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
А сега нека зададем във
функцията opacity стойност
равна на 0:
<div id="elem"></div>
#elem {
filter: opacity(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Вижте също
-
функция
blur,
която размазва фона -
функция
brightness,
която задава яркост на фона -
функция
contrast,
която задава контрастност на фона -
функция
drop-shadow,
която задава сянка на фона -
функция
hue-rotate,
която задава цветовата наситеност на фона -
функция
invert,
която инвертира цветовете на фона -
функция
sepia,
която преобразува фона в сепия -
свойство
background,
което е свойство-съкращение за фон -
свойство
background-image,
с което на блок може да се зададе фонова картинка