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

Опубликовано: 1 Марта, 2022

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

Синтаксис:

element {
    фон: rgba (красный, зеленый, синий, альфа);
    // свойство CSS
}

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

Example:

<!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>                    

Выход:

HTML CSS-Misc CSS

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

РЕКОМЕНДУЕМЫЕ СТАТЬИ