html - 降低图像的亮度而不影响图像上的元素
问题描述
我是一个从事前端项目的初学者HTML
,CSS
在我的网站上我有一张欢迎图片,其中包括以下内容:
我尝试brightness
使用图像调整图像的对比度以获得更好的对比度filter: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>
先感谢您。
解决方案
看起来你有一个 z-index 分层问题。使用这个 CSS:
.welcome-pic{
z-index:0;
}
.square-container {
z-index: 1;
}
.welcome-pic ul {
z-index: 1;
}
推荐阅读
- php - PhpStorm 检查中的“添加#[Pure] 属性”检查是什么?
- http - 多层基础设施中 HOST 标头的值应该是什么?
- html - 如何在 iPhone 设备上的 Outlook 应用内浏览器上播放 MP4 视频?
- azure-pipelines - ADF - 将没有列名的 CSV 加载到 AzureDB
- python - 熊猫和字典:如何获取每个键的所有唯一值?
- windows-subsystem-for-linux - 如何在 WSL2 中重置 Alpine 发行版?
- docker - 使用 nohup 在远程服务器的 docker 中运行一个长进程
- javascript - BoostrapTable - 根据数据库中的数据选择行
- azure - ODBC DataSource - 如何将数据保存在 Azure 云上以获取 PowerBI?
- google-apps-script - 具有域范围安装的 Gmail 插件不需要由谷歌审查