Question

我一直在寻找如何添加黑色覆盖层的示例： 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);
}

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

如何使用HTML和CSS在图片上添加黑色覆盖

1 个答案: