一：先建立一个大盒子
<body>
<div class="big">
</div>
<style>
.big { width:500px;
height:600px;
}
</style>
二：再大盒子中插入一个图片
<body>
<div class="big"><img src="图片地址" alt="图片">
</div>
<style>
.big { width:500px;
height:600px;
}
.big img {
width: 100%;
height: 100%;
}
</style>
三：设置阴影图层
<body>
<div class="big"><img src="图片地址" alt="图片"><div class="mask">
</div>
</div>
<style>
.big { width:500px;
height:600px;
/--由于子绝父相，所以这里应该修改--/
possition: relative;
}
.big img {
width: 100%;
height: 100%;
}
.mask {
/--隐藏阴影--/
display :none;
possition: absolution;
top: 0;
left: 0;
width: 100%;
height: 100%;
background :rgba(0,0,0,0.4);
.big: hover .mask {
/--显示阴影--/
display :block;
}
</style>
扫一扫
3467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
