2

В теге body необходимо вставить изображение на задний фон и поверх залить его прозрачным цветом. Использовал теги

body {
    background-image: url(../img/mnogoetazhka-%5B1600x1200%5D-%5B32918977%5D.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba( 255, 0, 0, 0.5);
}

но цвет при загрузке страницы лежит под картинкой, как расставить для них приоритеты?

4 ответа 4

4

Попробуйте добавить свойство background-blend-mode. (Не работает в IE, Edge и Opera Mini.)

Свойство background-blend-mode описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.

Вот шпаргалки на русском и на английском. В русской мало что переведено, зато в тамошнем примере можно попробовать разные эффекты наложения.

body {
  background-blend-mode: multiply;
  background-image: url(//i.stack.imgur.com/1ffAS.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(255, 0, 0, 0.5);
}

4

На момент публикации вопроса (23.06.2016), такие возможности CSS, как множественный фон и linear-gradient, уже поддерживались всеми основными браузерами, даже без префиксов. Потому странно видеть, что отсутствует самое очевидное решение:

body {
  /* Указав одинаковые значения цветов градиента, получаем однотонную заливку */
  background-image: linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)), url(https://i.stack.imgur.com/m9kuJ.jpg);
  background-position: top;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

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

body {
  /* Указываем высоту и убираем отступы. */
  min-height: 100vh; margin: 0;
  background-image: 
    /* Самый верхний слой. */
    url(https://i.imgur.com/pCm96IG.png), 
    linear-gradient(#ffff, #fff1, #ffff), 
    linear-gradient(to top, #00f0, #00f8), 
    linear-gradient(to left, #0800, #0808), 
    linear-gradient(to bottom, #fa00, #fa08), 
    linear-gradient(to right, #f000, #f008),
    /* Самый нижний слой. */
    url(https://i.stack.imgur.com/m9kuJ.jpg);
  /* Когда слоёв много, рекомендую задавать позицию и размер 
    каждому слою - меньше путаницы. Значения задаются в том 
    же порядке, в каком находятся слои в background-image. */
  background-position: center 5vh, center 43.4vh, 0% 100%, 100% 100%, 100% 0%, 0% 0%, top;
  background-size: auto 40vh, 40vw 40vh, 40vw 40vh, 40vw 40vh, 40vw 40vh, 40vw 40vh, cover;
  /* Если какое-то свойство гарантированно одинаковое 
    для всех слоёв, то можно задать его, как общее. */
  background-repeat: no-repeat;
}

2
body {
 position: relative;
 min-height: 620px;
 background-image: url("../img/mnogoetazhka-%5B1600x1200%5D-%5B32918977%5D.jpg");
}

body::before {
 content: '';
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 position: absolute;
 background-color: rgba( 255, 0, 0, 0.5);
}
0

Бывает так, что фоновая картинка задана элементу при помощи атрибута style. Для возможности редактирования фона из админки например. Тогда множественный background не подходит и можно использовать вариант с внутренней тенью.
box-shadow в браузерах 16 года имел хорошую поддержку.

body{
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  box-shadow: inset 0 0 0 200vw rgba(0,0,0,.5)
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="background-image: url(https://i.stack.imgur.com/m9kuJ.jpg)"></body>
</html>

2
  • "Тогда множественный background не подходит..." Это почему же? Пишем background-image: url(...) !important; и обходим style. При редактировании в админке, как правило, отсутствует возможность добавлять !important.
    – UModeL
    2 фев 2021 в 8:13
  • @UModeL , но ведь background-image: linear-gradient(полупрозрачный), url(...) !important в файле стилей полностью заменит собой значение в атрибуте. Будет принудительно использоваться картинка, которая указана в url в файле стилей. А вывод типа <body style="background-image: url(<?=$image?>)"> специально делают, чтобы пользователь мог управлять фоном блока из админки.
    – zhurof
    2 фев 2021 в 10:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.