我想在我的主要部分有一个背景图片。 然后下面就会有一个空的div。 其不透明度为 0.8。 下面将有一个 div 包含我的内容,该内容的不透明度为 1。或者我在上面指定了 0.8 的不透明度,这样它就不会进入底部内容框。 怎么办?
.opening-job-parent {
background-image: url("./images/header-banner-image-one.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 30vh;
width: 100%;
position: relative;
margin-bottom: 50px;
}
.opening-job-parent .empty-div {
background-color: #7f73eb;
width: 100%;
height: 100%;
position: absolute;
opacity: 0.8;
}
.opening-job-container {
opacity: 1;
color: white;
}
<section class="opening-job-parent">
<div class="empty-div">
</div>
<div class="opening-job-container">
<div class="opening-job-details">
<div class="opening-job-text">
<h1>Over 10k opening jobs</h1>
<p>If you are looking for free HTML templates, <br> you may visit Tooplate website. <br> If you need a collection of free templates, <br> you can visit Too CSS website.</p>
</div>
<div class="opening-job-account-link">
<a href="#">Create an account</a>
<a href="#">Post a job</a>
</div>
</div>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theming Example</title>
<style>
.one {
position: relative;
}
.one img {
width: 100%;
height: 100%;
background-position: 50%;
background-repeat: no-repeat;
}
.one .empty-div {
background-color: #7f73eb;
width: 100%;
height: 100%;
max-width: 520px;
max-height: 520px;
position: absolute;
opacity: 0.8;
top: 30%;
right: 20%;
}
.one .opening-job-container {
position: absolute;
width: 100%;
max-width: 420px;
height: 100%;
top: 0;
left: 0;
transition: .3 ease;
gap: 35px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
opacity: 1;
color: black;
}
</style>
</head>
<body>
<div class="one p-0">
<img class="img-fluid" src="https://yashborda.me/img/1.ff293dd4.jpg" alt="new1">
<div class="empty-div"></div>
<div class="opening-job-container">
<div class="opening-job-details">
<div class="opening-job-text">
<h1>Over 10k opening jobs</h1>
<p>If you are looking for free HTML templates, <br> you may visit Tooplate website. <br> If you need
a
collection of free templates, <br> you can visit Too CSS website.</p>
</div>
<div class="opening-job-account-link">
<a href="#">Create an account</a>
<a href="#">Post a job</a>
</div>
</div>
</div>
</div>
</body>
</html>
我已经解决了你的问题。 查看输出https://codepen.io/yashborda123/pen/oNJNedR?editors=1100