视差图像的不透明度
opacity on parallax images
我有一个父 div 用于视差 img 滚动功能。我希望视差图像的不透明度在 opactiy: 45% 左右;并且其中的所有内容都是不透明的:100%;
我一直在寻找,但还没有找到一种方法来做到这一点?他们是直接在背景图像上设置不透明度的方法吗?
html
<div class="img1">
<div class="container img1-container">
<!-- <div class="card"> -->
<img id="head-shot" src="./assets/images/john-headshots-5.jpg" alt="head-shot">
<br><br>
<h1 class="intro-text web-dev"> Front-End Web Developer</h1>
<h4 class="intro-text john-sass">John</h4>
<!-- </div> -->
</div>
</div>
css
.img1 {
background-image: url(/assets/images/skyline-1402050_1920.jpg);
min-height: 100%;
min-width: 100%;
opacity: 45%;
}
/* headshot img */
#head-shot {
text-align: center;
border-radius: 100%;
height: 300px;
width: 350px;
}
这是一个建议的解决方案,目前我不知道可以实施的解决方案只有 45%
的容器不透明度,我通常实施的唯一方法是有一个单独的 <img />
并将其自己的 CSS 位置设置为 absolute
和不透明度 45%
,如以下代码片段所示:
.img1 {
min-height: 100%;
min-width: 100%;
position: relative;
overflow: hidden;
}
.parallex-bg {
position: absolute;
left: 0px;
top: 0px;
right: 100%;
bottom: 100%;
z-index: -1;
opacity: 45%;
}
/* headshot img */
#head-shot {
text-align: center;
border-radius: 100%;
height: 300px;
width: 350px;
}
<div class="img1">
<img src="https://www.w3schools.com/css/img_forest.jpg" class="parallex-bg" />
<div class="container img1-container">
<!-- <div class="card"> -->
<img id="head-shot" src="./assets/images/john-headshots-5.jpg" alt="head-shot">
<br><br>
<h1 class="intro-text web-dev"> Front-End Web Developer</h1>
<h4 class="intro-text john-sass">John</h4>
<!-- </div> -->
</div>
</div>
我有一个父 div 用于视差 img 滚动功能。我希望视差图像的不透明度在 opactiy: 45% 左右;并且其中的所有内容都是不透明的:100%; 我一直在寻找,但还没有找到一种方法来做到这一点?他们是直接在背景图像上设置不透明度的方法吗?
html
<div class="img1">
<div class="container img1-container">
<!-- <div class="card"> -->
<img id="head-shot" src="./assets/images/john-headshots-5.jpg" alt="head-shot">
<br><br>
<h1 class="intro-text web-dev"> Front-End Web Developer</h1>
<h4 class="intro-text john-sass">John</h4>
<!-- </div> -->
</div>
</div>
css
.img1 {
background-image: url(/assets/images/skyline-1402050_1920.jpg);
min-height: 100%;
min-width: 100%;
opacity: 45%;
}
/* headshot img */
#head-shot {
text-align: center;
border-radius: 100%;
height: 300px;
width: 350px;
}
这是一个建议的解决方案,目前我不知道可以实施的解决方案只有 45%
的容器不透明度,我通常实施的唯一方法是有一个单独的 <img />
并将其自己的 CSS 位置设置为 absolute
和不透明度 45%
,如以下代码片段所示:
.img1 {
min-height: 100%;
min-width: 100%;
position: relative;
overflow: hidden;
}
.parallex-bg {
position: absolute;
left: 0px;
top: 0px;
right: 100%;
bottom: 100%;
z-index: -1;
opacity: 45%;
}
/* headshot img */
#head-shot {
text-align: center;
border-radius: 100%;
height: 300px;
width: 350px;
}
<div class="img1">
<img src="https://www.w3schools.com/css/img_forest.jpg" class="parallex-bg" />
<div class="container img1-container">
<!-- <div class="card"> -->
<img id="head-shot" src="./assets/images/john-headshots-5.jpg" alt="head-shot">
<br><br>
<h1 class="intro-text web-dev"> Front-End Web Developer</h1>
<h4 class="intro-text john-sass">John</h4>
<!-- </div> -->
</div>
</div>