在不影响图像元素的情况下降低图像的亮度答案

【问题标题】：decrease brightness of image without affecting elements on image在不影响图像元素的情况下降低图像的亮度
【发布时间】：2020-08-06 16:30:19
【问题描述】：

我是一个使用HTML 和CSS 从事前端项目的初学者，在我的网站上我有一张欢迎图片，包括在下面：

我尝试在图像上使用filter:brightness() 调整图像的brightness 以获得更好的对比度但是，当我应用filter:brightness(50%); 时，图像的亮度明显降低，但左侧的徽标和右侧的导航栏都消失了。我不明白为什么会发生这种情况，我将感谢您的帮助。我的代码：

.html,.body{
    background-size: cover;
}

body{
    overflow-x: hidden;
    margin:0;
    background: rgba(0, 0, 0, 0.1);
    font-family: Arial, Helvetica, sans-serif;

}
.welcome-container{
    position: relative;
    top:0px;
    left: 0px;
    width:100%;
    height:550px;
    margin:0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.welcome-pic{
    position: relative;
    
}

.welcome-pic h5{
    position: absolute;
    top:0%;
    left:6%;
}

#fly{
    font-size: 55px;
}

.welcome-pic img{
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
    


}

#welcome-plane{
    filter: brightness(50%);
}

#book{
    position: relative;
    background-color: white;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    top:50%;
    left:30%;
    cursor: pointer;
}

.square-container{
    position: absolute;
    top: 2px;
    left: 2%;
}

.ds-square{
    background-color: red;
    height: 50px;
    width:50px;
    opacity:1;

}

.ds-square span{
    position: relative;
    top:30%;
    left:27%;
    color:white;
    font-size:20px;
}


.welcome-pic img {
    width:100%;
    height:550px;
    opacity: 1;
}

.inside-pic{
    position:absolute;
    top:30%;
    left:50%;
    font-size: 60px;
    transform: translate(-50%, -50%);
}

.welcome-pic ul{
    position: absolute;
    top:2px;
    right:0%;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color: transparent;
}

.welcome-pic li{
    float:left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size:20px;
}

.inside-pic h3{
    font-size:18px;
}

<div class = "welcome-container">
      <div class = "welcome-pic">
        <h5>DS <br/> AIRLINES</h5>
        <div class="square-container">
          <div class="ds-square">
            <span id = "DS">DS</span>
          </div>
        </div>
        <ul>
          <li><a class="active" href = "#home">Home</a></li>
          <li>News</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
        <img src = "IMAGES/welcome_pic.jpg" alt="#" id = "welcome-plane">
        <div class = "inside-pic">
          <span id = "fly">FLY WITH  DS <br/> AIRLINES</span>
          <h3>Flights from or towards Athens ! Fly secure and comfortable with us! </h3> 
          <button id = "book">Book flight</button>
        </div>
      </div>
    </div>

提前谢谢你。

【问题讨论】：

标签： html css image brightness

【解决方案1】：

您似乎遇到了 z-index 分层问题。使用这个 CSS：

.welcome-pic{
    z-index:0;
}
.square-container {
    z-index: 1;
}
.welcome-pic ul {
    z-index: 1;
}

这里是代码笔：https://codepen.io/ladywebhawk/pen/NWNPNzN

【讨论】：

【解决方案2】：

您可以在您的 css 中使用以下代码（将图像作为 div 的背景）

.welcome-pic{
    background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url("IMAGES/welcome_pic.jpg") no-repeat center;
    background-size: cover;
}

确保从 html 中删除 img 标记。

您可以调整 rgba 值（alpha 值）来指定亮度级别。

【讨论】：