图像变暗而不是文本的视差站点

Question

我正在尝试创建一个包含多张图片的视差网页，但我想让图片变暗，让文字正常。我的图片和文字都在相同的 div 中，因为它的视差，但也许还有另一种方式？

.pimg1,
.pimg2,
{
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: brightness(50%);
  height: 100vh;
}

.pimg1 {
  background-image: url('https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg');
  min-height: 100%;
}

.pimg2 {
  background-image: url('https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg');
  min-height: 100%;
}

<body>
  <div>
    <img src="https://www.sticky.digital/wp-content/uploads/2013/11/img-6.jpg" class="pimg1">
    <div class="ptext">
      <h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
    </div>
  </div>
  <div>
    <div class="pimg2">
      <div class="ptext">
        <h1 class="openSans"><strong>Who am I</strong></h1> <br>
      </div>
    </div>
</body>

Answer 1

使用伪元素::before或::after

给你。试试这个

body{width:100%;}

.pimg1{
    position:relative;
    width:100%; 
    max-width:48%;
    margin-right:1%;
    float:left;
    height:100vh;
    margin-bottom:100px;
}
.pimg1::before{
  content:"";
  background:url('https://www.w3schools.com/html/clouds.jpg') no-repeat fixed center;
  background-size:cover;
  position:absolute; 
  top:0; 
  left:0; 
  height:100%;    
  width:100%;
  filter:brightness(50%);
  z-index:-1;
}

<body>
    <div class="pimg1">
        <div class="ptext">
            <h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
        </div>
    </div>
  
   <div class="pimg1">
        <div class="ptext">
            <h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
        </div>
    </div>

    <p style="padding-top:30px;">Original Image</p>
    <img src="https://www.w3schools.com/html/clouds.jpg">
 </body>

Answer 2

您可能看起来像下面这样：

<!DOCTYPE html>
<html>
<head>
 <title></title>
  <style>
   html, body {
  height:100%;
  padding:0;
  margin:0;
 }
    .pimg1, .pimg2 {
  position:relative;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment: fixed;
 }
 .pimg1::after, .pimg2::after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  z-index:0;
  display:block;
 }
 .pimg1 {
  background-image:url('https://via.placeholder.com/550');
  min-height: 100%;
 }
 .pimg2{
  background-image:url('https://via.placeholder.com/550');
  min-height: 100%;
 }
  </style>
</head>
<body>
    <div class="pimg1">
        <div class="ptext">
            <h1 class="Intro"><strong>Farbod Jahan</strong></h1> <br>
        </div>
    </div>
    <div class="pimg2">
        <div class="ptext">
            <h1 class="openSans"><strong>Who am I</strong></h1> <br>
        </div>
    </div>
 </body>
</html>

图像变暗而不是文本的视差站点

Parallax Site with darken image not text

html

css

overlay

parallax