Can you tell me how to darken the background? (semi-transparent color)

For example:

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;  
}

<header>
  <div class="inner">
    <h1>Lorem ipsum dolor.</h1>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi.</span>
  </div>
</header>

This is the answer to your question:

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;

Overlay a semi-transparent block with rgba background (where the 4th parameter is transparency) and with absolute positioning. HTML:

<div class="header">
<div class="cover"></div>
<div class="content"></div>
</div>

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;
}

You add a black background fill and opacity: значение от 0 до 1; for this background . Example: translucency opacity: 0.5;

You can do this by using a pseudo-element. The code will be something like this:

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;
}

<header>
  <div class="content">
    тут контент
  </div>
</header>

RGBA();

For example, background-color: rgba(0, 0, 0, 0.5);

It also took such a solution, as a result, the proposals did not fit through ::after, position and z-index. In these cases, you need to raise all the elements on the page to a higher position. Using filter and opacity is also not an option, everything is darkened.
The solution is simple.

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

You can at least do that. And there is no need to change anything anywhere.