百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

day11-css图片遮罩层

作者余非课程第九天到第十一天:来做一个漂亮的网站466次浏览12018-05-10 15:02

1、将遮罩层html代码与图片放在一个div
我是放在 .img_div里。

<div class="img_div">
    <img src="./images/paella-dish.jpg">

        <a href="#">
            <div class="mask">
               <h3>A Picture of food</h3>
                </div>
        </a>
</div>

2、为图片及遮罩层添加样式
图片:relative
遮罩层:absolute
使两者样式重合。
鼠标不在图片上时,遮罩层不显示 .mask { opacity: 0; }

.img_div {
    margin: 20px 400px 0 400px;
    position: relative;
    width: 531px;
    height: 354px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 531px;
    height: 354px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
}
.mask h3 {
    text-align: center;
}

3、使用hover
改变透明度,使遮罩层显示。

.img_div a:hover .mask {
    opacity: 1;           
}

效果图:

1条评论