Как сделать фон поверх картинки css
Перейти к содержимому

Как сделать фон поверх картинки css

  • автор:

Как наложить цвет на картинку css

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

Например, если у вас есть элемент с классом image-container , содержащий изображение, и вы хотите сделать полупрозрачный зеленый фон, вы можете использовать следующий CSS-код:

.image-container  background-color: rgba(0, 255, 0, 0.5); > 

Здесь мы устанавливаем цвет фона элемента с помощью свойства background-color . Функция rgba используется для установки цвета в формате «красный, зеленый, синий, прозрачность», где значения красного, зеленого и синего цветов находятся в диапазоне от 0 до 255, а прозрачность — от 0 до 1. Значение прозрачности 0.5 устанавливает полупрозрачный цвет.

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

.image-container  background-color: rgba(0, 255, 0, 0.5); background-blend-mode: overlay; > 

Здесь мы используем свойство background-blend-mode с значением overlay , таким образом фоновый цвет смешивается с фоновым изображением, чтобы отразить яркость или темноту фона.

Как сделать чтобы фон был поверх картинки?

Как сделать чтобы фон был поверх картинки и был прозрачен, как на картинке ?6047556f87299806404720.png 60475577ee88b910267200.png

  • Вопрос задан более двух лет назад
  • 632 просмотра

1 комментарий

Простой 1 комментарий

Ankhena

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
33.9k 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 золотых знака 15 15 серебряных знаков 36 36 бронзовых знаков

«Тогда множественный background не подходит. « Это почему же? Пишем background-image: url(. ) !important; и обходим style. При редактировании в админке, как правило, отсутствует возможность добавлять !important.

2 фев 2021 в 8:13

@UModeL , но ведь background-image: linear-gradient(полупрозрачный), url(. ) !important в файле стилей полностью заменит собой значение в атрибуте. Будет принудительно использоваться картинка, которая указана в url в файле стилей. А вывод типа

Наложение фона на картинку с помощью CSS

Как наложить фон на картинку с помощью CSS? Часто на главной странице сайта или ленинг-пейдж размещают картинку на всю ширину и высоту экрана, а сверху добавляют затемняющий фон, поверх которого в дальнейшем располагается заголовок. Давайте добавим не обычный заголовок, а поздравление с наступающим Новым 2019 годом! ��

Далее в примере я использую картинки с сайта http://lorempixel.com/, чтобы вы могли посмотреть результат в песочнице. Картинки генерируются автоматически, поэтому при каждом изменении кода, будет показываться новая картинка.

Добавим в html-файл следующий код:

 

С наступающим
Новым 2019 годом!

Самое важное, что нужно здесь понимать — позиционирование элементов относительно друг друга.

Пишем в css-файле следующий код:

@import url(‘https://fonts.googleapis.com/css?family=Lobster|Open+Sans&subset=cyrillic’); .wrapper < position: relative; // относительное позиционирование width: 100%; height: 100%; >.wrapper__image < background: url('http://lorempixel.com/400/200/nature/') top center no-repeat; // укажите url к своей картинке background-size: cover; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 0; >.wrapper:after < content: ''; background: rgba(0,0,0,0.7); // фон с прозрачностью 70% display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; >.wrapper__title

Вы можете внести изменения и посмотреть на результат в песочнице:

Другой вариант наложения фона в виде снега:

Голосов: 2 , Средняя оценка: 5

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *