css - background-image 和 background 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

您可以使用绝对定位的伪元素来做到这一点:

.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>