页面头部和banner图遮罩效果

最新推荐文章于 2021-11-25 11:45:06 发布

我是噢噢噢

最新推荐文章于 2021-11-25 11:45:06 发布

阅读量984

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_43558459/article/details/104325227

版权

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lalala</title>
    <link rel="stylesheet" href="css/Style.css">
</head>
<body>
    <!--头部-->
    <div class="header">
        <div class="title">
            <p>BAL.BAL</p>
        </div>
        <div class="nav">
            <ul>
                <li><a>Home</a></li>
                <li><a>News</a></li>
                <li><a>Answers</a></li>
                <li><a>About</a></li>
            </ul>
        </div>
    </div>
    <!--主体-->
    <div class="main">
        <div class="banner"><img src="img/1.jpg"></div>
        <!--遮罩层-->
        <div class="toplayer"></div>
        <div class="toplayer-top">
            <div class="word">MY BEAUTIFIFUL LIFE</div>
            <button>LOOK MORE></button>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <!--底部-->
    <div class="footer">

    </div>
</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
}
/*头部*/
.header{
    width: 100%;
    height: 100px;
    background-color: white;
}
/*title部分*/
.header .title{
    width: 200px;
    height: 100px;
    text-align: center;    
    float: left;
}
.header .title p{
    font-size: 30px;
    height: 100px;
    line-height: 100px;
    color: #7d7d7d;
    padding-left: 50px;
}
/*nav部分*/
.header .nav{
    width: 600px;
    height: 100px;
    float: right;
}
.header .nav ul{
    padding-right: 100px;
    cursor: pointer;
}
.header .nav ul li{
    float: left;/*因为li本身是块级元素，独占一行。设置浮动之后独占一行的属性就被清除掉了，所以可以在一行显示*/
    list-style: none;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 15px;
    font-weight: bold;
    color: #7d7d7d;
}
/*banner部分*/
.main .banner{
    width: 100%;
    height:600px;
}
.main .banner img{
    width: 100%;
    height:600px;
}
/*遮罩层*/
.main .toplayer{
    position: absolute;
    top: 100px;/*因为头部是100px*/
    left: 0;
    background-color: #000;/**/
    width: 100%;
    height: 600px;
    opacity: 0.5;/*透明度*/
}
.main .toplayer-top{
    width: 500px;
    height: 300px;
    position: absolute;
    top: 400px;
    margin-top: -150px;/*垂直居中*/
    z-index: 2;
    right:50%;
    margin-right: -250px;/*水平居中*/
    text-align: center;
}
.main .toplayer-top .word{
    padding-top: 100px;
    color: #fff;
    font-size: 45px;
    font-weight: bold;
    
}
.main .toplayer-top button{
    width: 200px;
    height: 60px;
    color: #fff;
    background-color: #f5704f;
    font-weight: bold;
    font-size: 14px;
    margin-top: 50px;
    border-radius: 8px;/*设置圆角*/
}

效果图：
在这里插入图片描述

做一个图片的遮罩层（模糊层）方法：

在装有img盒子的下方再定义一个div，类名建议为layer（遮罩）
然后定义layer的属性，宽高都要和图片一样，背景颜色为黑色，
用绝对定位poition:absolute的方法把遮罩盒子盖在图片上方，
然后设置透明度opacity，最后别忘了给层级z-index.
（一定要给layer,z-index,遮罩层等级要高于图片层。）

注： position设置为absolute的时候，一般是需要结合left和top一起使用。
因为透明层不设置top和left值的话，他只是在自己当前的位置绝对定位，脱离文档流，但是不会发生位置改变，需要设置left/top/right/bottom值，才可以改变绝对定位元素的位置

我是噢噢噢

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面头部和banner图遮罩效果

html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lala...
复制链接

扫一扫