Рубрики

Установите прозрачность только на цвет фона, а не на текст в CSS

Свойство opacity используется в изображении для описания прозрачности изображения. Значение непрозрачности находится в диапазоне от 0,0 до 1,0, где низкое значение представляет высокую прозрачность, а высокое значение представляет низкую прозрачность. Процент непрозрачности рассчитывается как непрозрачность% = непрозрачность * 100
Чтобы установить непрозрачность только для фона, а не текста внутри него. Его можно установить с помощью значений цвета RGBA вместо свойства непрозрачности, поскольку использование свойства непрозрачности может сделать текст внутри него полностью прозрачным элементом.

Синтаксис:

element {
    background: rgba(red, green, blue, alpha);
    // CSS property
}

Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета от 0 до 255. Значения цвета RGBA являются расширением значений цвета RGB с альфа-каналом, который задает непрозрачность для цвета. Альфа-параметр — это число от 0,0 (полностью прозрачное) до 1,0 (полностью непрозрачное).

Пример:

<!DOCTYPE html>

<html>

    <head>

        <title>rgba property</title>

        <style>

            h1 {

                color: green;

            }

            h1, h2 {

                text-align: center;

            }

            div {

                background: rgb(0, 151, 19);

                padding: 10px;

                text-align:justify; 

            }

      

            div.first {

                /*setting alpha = 0.1*/

                background: rgba(0, 151, 19, 0.1);

            }

      

            div.second {

                /*setting alpha = 0.3*/

                background: rgba(0, 151, 19, 0.3);

            }

      

            div.third {

                /*setting alpha = 0.6*/

                background: rgba(0, 151, 19, 0.6);

            }

        </style>

    </head>

    <body>

        <h1>GeeksforGeeks</h1>

        <h2>Using RGBA color values:</h2>

        <div class="first">

            <p>This paragraph is shown at 10% opacity.</p></div>

        <div class="second">

            <p>This paragraph is shown at 30% opacity.</p></div>

        <div class="third">

            <p>This paragraph is shown at 60% opacity.</p></div>

        <div><p>This is default.</p></div>

    </body>

</html>                    

Выход:

Рекомендуемые посты:

Установите прозрачность только на цвет фона, а не на текст в CSS

0.00 (0%) 0 votes