我正在创建一个有3个图像的视差网页，但我希望图像变暗，文本不变暗，但当我调整过滤器亮度时，整个网页都变暗了。我也在第三页中添加了列，但似乎有列会使它不对齐，并且左下角与文本的其余部分不对齐。HTML
<!DOCTYPTE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Page</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div>
<div class="pimg1">
<div class="ptext">
<h1 class="Intro"><strong>Intro </strong></h1> <br>
</div>
</div>
<div class="pimg2">
<div class="ptext">
<h1 class="openSans"><strong>Who am I</strong></h1> <br>
<p> Words and stuff
</p>
</div>
</div>
<div class="pimg3">
<div class="ptext">
<h1 class="openSans"><strong>How I Work</strong></h1>
<div class="column">
<i class="fas fa-search" style="color:#1d5ba0; padding: 10px"></i>
<h2>Research</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-flask" style="color:#1d5ba0; padding: 10px"></i>
<h2>Design</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-code" style="color:#1d5ba0; padding: 10px"></i>
<h2>Build</h2>
<p>Words.</p>
</div>
<div class="column">
<i class="fas fa-retweet" style="color:#1d5ba0; padding: 10px"></i>
<h2>Refine </h2>
<p>Words.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight: 400px;
line-height: 1.8em;
color:#666;
}
.pimg1, .pimg2, .pimg3{
position:relative;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
filter:brightness(50%);
}
.pimg1{
background-image:url('../img/image1.jpg');
min-height: 100%;
}
.pimg2{
background-image:url('../img/image2.jpg');
min-height: 100%;
}
.pimg3{
background-image:url('../img/image3.jpg');
min-height: 100%;
}
.ptext{
position:absolute;
top:50%;
width: 100%;
text-align:center;
color:#000;
font-size: 40px;
}
h1{
display: block;
font-size: 2em;
margin-block-start: auto;
margin-block-end: auto;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.openSans {
font-family: Open Sans!important;
color:white;
}
h1.Intro{
font-family: Open Sans!important;
color:white;
margin-block-start: -3em;
}
h2{
font-size: 1em;
margin-block-start: auto;
font-weight: bold;
text-align: center;
}
p{
font-size: 14px;
color: white;
display: block;
margin-left:auto;
margin-right:auto;
width: 35em;
text-align: center;
}
.column {
float: left;
width: 47%;
padding: 15px;
}
听起来你几乎已经自己回答了。如果你想调整图像而不是文本的亮度，你就不能调整"整件事"。您需要确保图像和文本在html中是分开的，然后使用其id或类单独调整图像。
例如：您可能有一个
<div id="allinone">text</div>
在css中分配了图像。将它们分开，你会想要：
<div id="notallinone">
text
<img class="darkenedImg" src="yourimageurl.png"/>
</div>
在这里，您可以将样式分别添加到#notallinone和.downedImg css块
我只是设法使图像变暗，然后上传到我的工作区，这也做了同样的事情