Не существует CSS-свойства, такого как background-opacity, которое можно использовать только для изменения прозрачности фона, не затрагивая его дочерние элементы. С другой стороны, если вы попытаетесь сделать это с помощью CSS-свойства opacity, это не только изменит непрозрачность фона, но также изменит непрозрачность всех дочерних элементов.

В таких ситуациях вы можете использовать цвет RGBA, введенный в CSS3, который включает альфа-прозрачность как часть значения цвета. Используя цвет RGBA, вы можете установить цвет фона, а также его прозрачность, как показано в следующем примере:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Opacity Using RGBA Colors</title>
<style>
    body {
        background-image: url("images/pattern.jpg");
    }
    p{
        padding: 20px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        font: 18px Arial, sans-serif;
    }
</style>
</head>
<body>
    <p>Настройка прозрачности фона без изменения текстового содержимого.</p>
</body>
</html>

В качестве альтернативы вы можете использовать прозрачные изображения PNG для достижения этого эффекта или использовать псевдоэлементы, которые не влияют на дочерние элементы.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.