Атрибут в фоновом изображении и фоновом URL

Question

Я пытаюсь применить фильтр к своему фоновому изображению, однако у меня возникают проблемы с атрибутами CSS URL и линейным градиентом. Я хотел бы иметь фоновое изображение

.bg-image-full {
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.background-tint {
	   background-image: linear-gradient(rgba(62, 63, 64, 0.6), rgba(62, 63, 64, 0.6));
	}

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
  <header class="py-5 bg-image-full background-tint" style="background-image: url('https://cdn.japantimes.2xx.jp/wp-content/uploads/2018/07/n-tokyo-a-20180715.jpg');">
		<img alt="ava" class="img-fluid d-block mx-auto rounded-circle" src="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png">
	</header>

город с фоновым оттенком сверху, но он не будет работать должным образом. Так как фоновое изображение находится сверху от оттенка. Я также хотел бы сохранить источник URL-адреса изображения в коде HTML, а не CSS, поскольку я использую класс для нескольких изображений.

Answer 1

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

Для вашего конкретного случая использования вы можете просто использовать псевдоэлемент для удержания градиента. Это поместит градиент поверх вашего элемента / background-image:

.background-tint::after {
   content: '';
   display: block;
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
   background-image: linear-gradient(rgba(62, 63, 64, 0.6), rgba(62, 63, 64, 0.6));
}

Если это накладывается нежелательно, вы можете добавить z-index к своему внутреннему img:

header > img { position: relative; z-index: 2 }

Answer 2

Для этого можно использовать абсолютно позиционированный псевдоэлемент:

.bg-image-full {
  background: no-repeat 50%;
  -webkit-background-size: cover;
  background-size: cover;
}

.background-tint,
.background-tint .img-fluid {
  position: relative;
}

.background-tint:before {
  position: absolute;
  content: '\a0';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(62, 63, 64, 0.6), rgba(62, 63, 64, 0.6));
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<header class="py-5 bg-image-full background-tint" style="background-image: url('https://cdn.japantimes.2xx.jp/wp-content/uploads/2018/07/n-tokyo-a-20180715.jpg');">
  <img alt="ava" class="img-fluid d-block mx-auto rounded-circle" src="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png">
</header>