Как сделать чтобы фон был поверх картинки?
Как сделать чтобы фон был поверх картинки и был прозрачен, как на картинке ? 
- Вопрос задан более двух лет назад
- 578 просмотров
1 комментарий
Простой 1 комментарий
Ankhena @Ankhena Куратор тега CSS
Вариантов много
1. Картинка — фон body
Полупрозрачный цвет — фон обертки формы или самой формы
2. Картинка и цвет — заливки одного блока, но тогда вместо просто цвета нужно использовать градиент из цвета в самого себя.
3. Картинка — фон body или обертки формы
Цвет — огромной тенью от формы
4. Картинка — фон body или обертки формы
Цвет — полупрозрачный псевдо
И различные комбо этих вариантов.
background-color поверх background-image в body
Свойство 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); >Отслеживать
ответ дан 25 июн 2016 в 18:32
Gleb Kemarsky Gleb Kemarsky
7,274 2 2 золотых знака 22 22 серебряных знака 45 45 бронзовых знаков
На момент публикации вопроса (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; >Отслеживать
ответ дан 24 дек 2020 в 16:40
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак
body < position: relative; min-height: 620px; background-image: url("../img/mnogoetazhka-%5B1600x1200%5D-%5B32918977%5D.jpg"); >body::before
Отслеживать
ответ дан 23 июн 2016 в 13:48
86 7 7 бронзовых знаков
Бывает так, что фоновая картинка задана элементу при помощи атрибута style . Для возможности редактирования фона из админки например. Тогда множественный background не подходит и можно использовать вариант с внутренней тенью.
box-shadow в браузерах 16 года имел хорошую поддержку.
body
Document Отслеживать
ответ дан 24 дек 2020 в 17:08
10.4k 2 2 золотых знака 14 14 серебряных знаков 36 36 бронзовых знаков
«Тогда множественный background не подходит. « Это почему же? Пишем background-image: url(. ) !important; и обходим style. При редактировании в админке, как правило, отсутствует возможность добавлять !important.
2 фев 2021 в 8:13
@UModeL , но ведь background-image: linear-gradient(полупрозрачный), url(. ) !important в файле стилей полностью заменит собой значение в атрибуте. Будет принудительно использоваться картинка, которая указана в url в файле стилей. А вывод типа
