如何使用html和css在图片上添加黑色覆盖[重复]答案

【问题标题】：How to add a black overlay on picture using html and css [duplicate]如何使用html和css在图片上添加黑色覆盖[重复]
【发布时间】：2019-07-24 02:35:34
【问题描述】：

我一直在搜索如何添加黑色叠加层，例如： https://ocean19.com/wp-content/uploads/2017/04/black.jpg

但只使用 html 和 css。我尝试了很多方法，但还是失败了。是否可以只使用 html 和 css 或者我也应该使用 javascript 和其他东西？

我当前的代码：

html:

<div class="container">

    <img src="image/head1.jpg" class="center-fit">

    <div class="centered">Centered</div>
</div>

css:

.container {
  position: relative;
  text-align: center;
  color: white;
  height:100%;
  display: grid;
}

 .center-fit {
    width: 100%;
    max-width: 1903px;
    max-height: auto;
    position: absolute;
    margin-left: -8px;
    background: rgba(0, 0, 0,1);
}

【问题讨论】：

标签： html css

【解决方案1】：

您可以通过使用pseudo elements ::after 来实现此目的

body {
	margin: 0;
	padding: 0;
}
.centered {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 45px;
	text-transform: uppercase;
	z-index: 10;
}
.container::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.47);
}
.container {
    position: relative;
    text-align: center;
    color: white;
    height: 100%;
    display: block;
}
.center-fit {
    width: 100%;
    display: block;
}

<div class="container" > <img src="https://preview.ibb.co/k2cREc/banner_about.jpg" alt="" class="center-fit">
  <div class="centered">Centered</div>
</div>

【讨论】：