Затемнение изображения с помощью CSS

Такой способ затемнения изображения можно использовать для элементов сайт, а так же можно оформить для фона сайта, либо для отдельных разделов сайта.

Пример

Lorem Ipsum

HTML


<div class="section-overlay"><p>Lorem Ipsum</p></div>

CSS


.section-overlay {
    background: url(image.jpg) rgba(0, 0, 0, 0.6); /* Прописываем путь к картинке и задаем цвет и прозрачность */
    background-size: cover; 
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    text-align:center; /* Текст по центру */
    color: #fff; /* Цвет текста */
    padding: 50px 0; /* Отступ сверху и снизу */
}