不太明白,老师能讲讲为什么这么做吗?

不太明白,老师能讲讲为什么这么做吗?

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

*{

margin: 0;

padding:0;

}

img{

width: 380px;

height: 240px;

}

/*此处写代码*/

.qq{

    z-index:1;

    opacity:0.5;

    width:380px;

    height:240px;

    background-color:#000;

   position:absolute;

   top:0;

   left:0;

}

</style>

</head>

<body>

<div>

<img src="http://img1.sycdn.imooc.com/climg//58f829ca00010be703840240.jpg">

</div>

<div class=qq></div>

    


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2020-09-18 10:28:45

同学你好,是不明白遮罩的定位吗?参考如下理解:

默认情况下,div元素都是从上往下顺序显示的,那么遮罩在不定位之前,也是在图片的下面

http://img1.sycdn.imooc.com//climg/5f641abc09a6f52206980598.jpg

如果想要遮罩层在上面,就需要设置定位,即设置position:absolute。设置定位之后,就要移动它的位置,即设置left:0和top:0 ,让它显示在左上角,就能盖在图片上面了。

http://img1.sycdn.imooc.com//climg/5f641afc096e19be04510532.jpg

如果还有其他地方不明白,可以详细说一下,以便老师针对你不懂的地方为你解答。

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师