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

Как сделать фон темнее css

  • автор:

Подскажите, как сделать затемнение фона? (полупрозрачным цветом)

Сейчас на многих сайтах используется такое затемнение, но я не нашел, как его сделать. Например у header есть картинка на фоне, а поверх нее текст. Но чтобы текст читался, поверх картинки накладывается полупрозрачный черный например фон. Как его сделать? Для header имеются такие свойства:

header < height: 538px; width: 100%; background: url(../img/header-bg.png) no-repeat center center; background-size: cover; >

Отслеживать
user212578
задан 3 мая 2017 в 8:19
PolonskiyP PolonskiyP
239 2 2 золотых знака 5 5 серебряных знаков 13 13 бронзовых знаков
Возможный дубликат вопроса: как исключить применение стиля к дочерним селекторам CSS
12 фев 2018 в 19:04

8 ответов 8

Сортировка: Сброс на вариант по умолчанию

header < position: relative; background: url(https://amazingcarousel.com/wp-content/uploads/amazingcarousel/3/images/lightbox/golden-wheat-field-lightbox.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; >header:after < content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 2; >.inner
 

Lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi.

Отслеживать
ответ дан 3 мая 2017 в 12:28
22.4k 11 11 золотых знаков 56 56 серебряных знаков 121 121 бронзовый знак

Это ответ на ваш вопрос:

background: linear-gradient( rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.5) ), url('/img/back/home-back.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; 

Отслеживать
51.6k 202 202 золотых знака 65 65 серебряных знаков 249 249 бронзовых знаков
ответ дан 3 янв 2018 в 16:52
Alisher Aidarkhanov Alisher Aidarkhanov
129 2 2 серебряных знака 7 7 бронзовых знаков

Наложить полупрозрачный блок c rgba бэкграундом (где 4й параметр прозрачность) и с абсолютным позиционированием. HTML:

.header < position: relative; >.cover < background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; bottom: 0; left: 0; right: 0; >.content

Отслеживать
ответ дан 3 мая 2017 в 11:21
307 5 5 серебряных знаков 13 13 бронзовых знаков

отличный простой вариант, но он затемняет и весь остальной контент, и z-index-ом почему-то не регулируется.

3 мая 2017 в 13:19
Отредактировал, думаю так понятней. Мы накладываем блок поверх.
3 мая 2017 в 16:45

Тоже понадобилось такое решение, в итоге не подходили предложения через ::after , position и z-index . В этих случаях нужно все элементы на странице поднимать на позицию выше. Через filter и opacity тоже не вариант, затемняется всё.
Решение простое.

 background: url('../img/header/bg.jpg') no-repeat center /cover, #555555; background-blend-mode: hard-light;//или multiply 

Можете хоть зелёной сделать. И ни где ничего не надо менять.

Как с помощью CSS произвести затемнение картинки?

5c03bfa0bacd1626083107.png

>
Необходимо произвести затемнение картинки как показано на примере, какие есть возможность для реализации данной идеи?
Из

5c03bf57121f3330698472.png

в

  • Вопрос задан более трёх лет назад
  • 72863 просмотра

2 комментария

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

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS

1. Наложить поверх картинки полупрозрачный элемент нужного цвета.
2. Задать фон нужного цвета блоку под картинкой, а самой картинки необходимую прозрачность opacity

background-blend-mode

Определяет режим наложения фонового изображения на фоновый цвет или другие фоновые изображения. Допустимо указывать несколько значений через запятую, при этом они будут применяться к фоновым изображениям, перечисленных в background-image, в том же порядке.

Краткая информация

Значение по умолчанию normal
Наследуется Нет
Применяется Ко всем элементам
Анимируется Нет

Синтаксис

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Значения, в целом, совпадают с режимами графических редакторов. Ниже описания взяты из руководства Adobe Photoshop.

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

  • Основной цвет — исходный цвет в изображении.
  • Совмещённый цвет — цвет накладываемого изображения.
  • Результирующий цвет — цвет, полученный в результате наложения.

Песочница

normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity

Пример

background-blend-mode

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

Вид фона

Объектная модель

Объект.style.backgroundBlendMode

Примечание

Safari до версии 10 и iOS Safari до версии 10.3 не поддерживают значения hue , saturation , color и luminosity .

Спецификация

Спецификация Статус
Compositing and Blending Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

35 22 7.1 10.1 30

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Справочник CSS

  • !important
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::placeholder
  • ::selection
  • :active
  • :blank
  • :buffering
  • :checked
  • :default
  • :dir
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :focus-within
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :link
  • :muted
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :paused
  • :placeholder-shown
  • :playing
  • :read-only
  • :read-write
  • :required
  • :root
  • :seeking
  • :stalled
  • :target
  • :valid
  • :visited
  • :volume-locked
  • @charset
  • @document
  • @font-face
  • @import
  • @keyframes
  • @media
  • @page
  • @supports
  • @viewport
  • accent-color
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • aspect-ratio
  • backdrop-filter
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size
  • block-size
  • border
  • border-block
  • border-block-color
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • border-block-style
  • border-block-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-start-end-radius
  • border-start-start-radius
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-decoration-break
  • box-shadow
  • box-sizing
  • caption-side
  • caret-color
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • gap
  • height
  • hyphenate-character
  • hyphenate-limit-chars
  • hyphens
  • image-rendering
  • justify-content
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-block-size
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-block
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • pointer-events
  • position
  • quotes
  • resize
  • right
  • row-gap
  • scroll-behavior
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip-ink
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-fill-color
  • text-indent
  • text-orientation
  • text-overflow
  • text-shadow
  • text-stroke
  • text-stroke-color
  • text-stroke-width
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index
  • zoom

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

Несколько примеров как затемнить изображение в свойстве background и теге .

Затемнение

Первый способ затемнить img

Сделать тёмный фон под изображением , а самому изображению добавить прозрачность с помощью opacity .

.image < background: #000; >.image img
Пример:

Второй способ затемнить img

CSS фильтр Фильтр brightness у .

.image img
Пример:

Третий способ затемнить img

Полупрозрачный элемент над .

Пример:
.image < position: relative; >.image-filter
Пример:

Затемнение фона background

Если картинка задана через свойство background , то есть два способа ее затемнить:

Первый способ затемнить background

Наложить полупрозрачный слой через псевдо-свойство :before с background-color: rgba(0,0,0,.5) или opacity: 0.6 .

.image < position: relative; height: 420px; width: 100%; background: url(/image.jpeg) 0px 0px no-repeat; background-size: cover; >.image:before

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

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