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>

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

2 个答案: