1. display 显示隐藏
display属性用于设置一个元素如何显示
display: none; 隐藏对象
display: block; 除了转换为块元素之外,同时还有显示元素的意思
display隐藏元素后,不再占有原来的位置
2. visibility 显示隐藏
visibility属性用于指定一个元素应可见还是隐藏
visibility: visible; 元素可见
visibility: hidden; 元素隐藏
visibility隐藏元素后,继续占有原来的位置
3.overflow 溢出显示隐藏
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生声明
属性值 | 描述 |
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管是否超出内容,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
鼠标经过显示遮罩:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.zhezhao {
position: absolute;
width: 444px;
height: 320px;
margin: 30px auto;
background-color: skyblue;
}
.zhezhao img {
width: 100%;
height: 100%;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4) url(img/播放.jpg) no-repeat center;
}
.zhezhao:hover .mask {
display: block;
}
</style>
</head>
<body>
<div class="zhezhao">
<div class="mask"></div>
<img src="img/1.png" alt="" />
</div>
</body>
</html>
结果图: