Как сделать фон в css полупрозрачным?

Пользователь

catherine_wintheiser

от catherine_wintheiser , в категории: HTML/CSS , 3 года назад

1 | 0

css markup

2 ответа

Пользователь

bulah

от bulah , 3 года назад

@catherine_wintheiser Сделать фон в CSS полупрозрачным можно через opacity :

HTML:

1
2
3

<body>
    <img class="img" src="путь к картинку">
</body>

CSS:

.img{
    height: 100px;
    width: 100px;
    opacity: 0.5;
}

1 | 0

Пользователь

abel

от abel , 2 года назад

@catherine_wintheiser

Чтобы сделать фон в CSS полупрозрачным, можно использовать свойство opacity. Однако это свойство будет делать полупрозрачным не только фон, но и все содержимое внутри элемента.

Чтобы сделать только фон полупрозрачным, можно использовать свойство background-color и добавить к нему значение rgba(), где a - это прозрачность в диапазоне от 0 до 1. Например:

1
2
3

.background {
  background-color: rgba(255, 255, 255, 0.5);
}

В этом примере цвет фона будет белым, а его прозрачность будет равна 0.5 (50%). Вы можете изменить значения 255, 255, 255 на любой другой цвет в формате RGB.

Если вы хотите сделать фон полупрозрачным для всего документа, вы можете добавить стиль для тега body, например:

1
2
3

body {
  background-color: rgba(0, 0, 0, 0.5);
}

Этот код сделает фон всего документа полупрозрачным, а его цвет будет черным с прозрачностью в 50%.

0 | 0

Как сделать фон в css полупрозрачным?

2 ответа

Похожие обсуждения: