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

#html #css #веб_программирование #веб_дизайн

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

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

    

Ответы

Ответ 1

например:



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 {
  position: relative;
  z-index: 3;
  color: #fff;
  text-align: center;
  padding: 50px;  
}

  

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



Ответ 2

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

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;


Ответ 3

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







CSS:

.header{
position: relative;
}
.cover{
background: rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.content{
position: relative;
z-index: 2;
}


Ответ 4

Добавляешь черную заливку фона и opacity: значение от 0 до 1; для этого фона . Пример:
полупрозрачность opacity: 0.5;


Ответ 5

Можно сделать с помощью псевдоэлемента. Код будет примерно такой:



header {
    height: 538px;
    width: 100%;
    background: url(../img/header-bg.png) no-repeat center center;
    background-size: cover;
    position: relative;
}
header:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0.5;
    z-index: 1;
}
.content{
    position: relative;
    color: white;
    z-index: 2;
}

  

    тут контент
  



Ответ 6

RGBA();

например, background-color: rgba(0, 0, 0, 0.5);