Question

我正在创建一个具有3张图像的视差网页，但是我希望图像变暗而文本不会变暗，但是当我调整滤镜亮度时，整个东西都会变暗。我还在第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;
}

Answer 1

听起来您已经快要回答了。如果要调整图像的亮度而不是文本的亮度，则不能调整“整体”。您需要确保图像和文本在html中是分开的，然后使用其ID或类单独调整图像。

例如：您可能有

<div id="allinone">text</div>

具有在css中分配的图像。要将它们分开，您会想要：

<div id="notallinone">
     text
    <img class="darkenedImg" src="yourimageurl.png"/>
</div>

在哪里可以分别向#notallinone和.darkenedImg css块添加样式

Answer 2

我只是设法使图像变暗，然后上传到我的工作区，做同样的事情

视差网页使图像变暗，但文本变暗

2 个答案: