Этот способ можно считать несколько устаревшим из-за наличия режимов наложения фона, хотя режимы наложения не поддерживаются во всех версиях браузеров Internet Explorer и Edge, многих мобильных браузерах и только частично поддерживается в браузерах Safari, так что этот способ можно использовать как обходной путь.

В CSS нет возможности напрямую задать прозрачность фону, но есть простой способ для имитации этого с помощью множественных фоновых изображений. Этот способ основывается на том, что свойству фонового изображения можно задать цвет, в том числе и в формате rgba, который включает значение прозрачности.

Размытие фона можно использовать для усиления контраста между текстом и изображением, находящимся за ним. Конечно, можно уменьшить прозрачность изображения, обработав его в программе PhotoShop, но для этого обычно нужно многократное повторение подбора цветов в программе-редакторе изображений и проверки получившегося результата в браузере, в то время как изменение значений в коде CSS требует намного меньше времени и усилий.

Фоновое изображение до затемнения

В записи свойства множественных фоновых изображений первым идет самый верхний фон, так что составная фотография, выполненная Thomas Shahan, располагается последней:

h1 {
        font-family: Calluna Sans, Arial, sans-serif;
        color: #fff;
        margin-top: 0;
        background: linear-gradient(rgba(0,0,0,0.5),
         rgba(0,0,0,0.5)),
          url('bugs.jpg');
        font-size: 5rem;
        padding: 2rem;
        text-align: center;
        background-repeat: no-repeat;
        background-size: cover;
        word-spacing: 5rem;
}

Применим этот код CSS к коду HTML ниже:

<h1>Бешеный жук</h1>

И получим результат, показанный далее. Изменение затемнения фонового изображения достигается просто увеличением последнего значения (alpha), которое задает прозрачность, в записи цвета фона в формате rgba.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также: