Как сделать прозрачность элемента или цвета фона CSS

Давным-давно у меня была проблема. Я не знал как сделать 3 вещи:

  • Упорядоченный список для создания меню
  • Прозрачность элемента
  • Прозрачность фона

В первом случае Я просто не мог запомнить структуру 🙂 его я пропущу, а вот вторые два рассмотрю более подробнее.

На самом деле все достаточно просто.

1. Прозрачность элемента в HTML

Прозрачность элемента задается с помощью CSS свойства opacity.

Выглядит это так

-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */

 opacity принимает значения от 0 до 1. Т.е. 0% прозрачности и 100% прозрачности

12

В итоге, что бы задать прозрачность картинке следует добавить такие стили

img {
  -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
  -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
  opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}

или к конретному блоку с классом .name

.name {
  -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
  -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
  opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}

или картинке которая находится в блоке с классом .name

.name img {
  -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
  -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
  opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}

А вот так можно задать прозрачность любому элементу при наведении

.name img:hover {
  -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
  -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
  opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}

Прозрачность можно применять к любому элементу на странице.

2. Прозрачность цвета фона CSS

Тут еще проще. Цвета в HTML можно задавать в HEX и RGB формате. Прозрачность поддерживает именно RGB.

Вот пример HEX формата

background:#000000;

А вот то же самое только в RGB

background:RGB(0,0,0);

Получить RGB формат можно с помощью онлайн конвертеров или в палитре PhotoShop

Прозрачность фону задается вот так

background:RGB(0,0,0, 0.30);

В этом примере прозрачность цвета фона будет равна 30%

Зададим прозрачность фона элементу с классом .name

.name {
  background:RGB(0,0,0, 0.30);
}

Значение может быть от 0 до 100

И вот еще пример применения прозрачности цвета фона при наведении 

.name:hover {
  background:RGB(0,0,0, 0.30);
}

О том, как добавить CSS стили на сайт можно почитать тут , а о том, как найти класс нужного элемента тут

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$