напівпрозорий елемент

Щоб зробити елемент, наприклад.footer, напівпрозорим, можна використати властивість CSS opacity. Ця властивість визначає рівень прозорості елемента, де значення 1 означає повну непрозорість, а 0 — повну прозорість.

Ось як можна оновити код:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Рядок внизу сторінки</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh; /* Встановлюємо висоту тіла сторінки */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            opacity: 0.8; /* Напівпрозорість */
        }
    </style>
</head>
<body>
    <h1>Привіт, світ!</h1>

    <div class="footer">
        Це рядок завжди буде внизу сторінки і напівпрозорим
    </div>
</body>
</html>

Пояснення:

  • opacity: 0.8: Встановлює прозорість елемента на 80%. Чим менше значення, тим прозорішим буде елемент. Наприклад, opacity: 0.5 зробить елемент на 50% прозорим, а 0.9 — на 10%.

Ця властивість впливатиме як на фон, так і на текст усередині елемента. Якщо ти хочеш зробити прозорим лише фон, а текст залишити повністю непрозорим, можна використовувати rgba для кольору фону:

background-color: rgba(51, 51, 51, 0.8); /* Чорний фон з прозорістю 80% */

Тоді текст залишиться повністю білим, а фон буде напівпрозорим:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Рядок внизу сторінки</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgba(51, 51, 51, 0.8); /* Прозорий фон */
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Привіт, світ!</h1>

    <div class="footer">
        Це рядок завжди буде внизу сторінки, а фон буде напівпрозорим
    </div>
</body>
</html>
PreviousЗавжди внизу, незалежно від пропорцій екрануNextСимволи з тінью

Last updated