老师代码对吗?

来源:2-4 编程练习

小彤紫

2019-08-02 15:26:03

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

*{

margin: 0;

padding:0;

}

img{

width: 380px;

height: 240px;

position:relative;

z-index:0;

}

.layer{

    width:380px;

    height:240px;

    position:absolute;

    top:0;

    left:0;

    background:black;

    opacity:0.5;

    z-index:1;

}

</style>

</head>

<body>

<nav>

</nav>

<div>

<img src="http://climg.mukewang.com/58f829ca00010be703840240.jpg">

</div>

<div class="layer"></div>

</body>

</html>

这个我设置img 相对定位,遮罩层设置根据relative而绝对定位。思路是对的吗?

写回答

1回答

樱桃小胖子

2019-08-02

同学的代码虽然效果实现了,但是代码不是很规范,如果是在复杂的页面中,是会出现问题的。建议参考如下:

http://img.mukewang.com/climg/5d43f6380001b89f08740854.jpg

让遮罩层和img具有相同的父元素,遵循“子绝父相”的原则哦

希望可以帮到你!

0

0 学习 · 40143 问题

查看课程