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>

Answer 2

首先，它根本不会显示，不是因为它在背景图像下，而是因为当您在元素上内联设置背景图像时，您要覆盖渐变。

对于您的特定用例，您可以简单地使用伪元素来保存渐变。这会将渐变放置在元素/背景图像的顶部：

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

如果此覆盖不希望有，您可以向内部img添加一个z-index：

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

背景图片和背景网址中的属性

2 个答案: