目录
-
隐藏标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>隐藏标签</title> <style> body{ background-color: palegoldenrod; } div{ width: 200px; height: 200px; background-color: palevioletred; } /* 鼠标悬浮在文档 隐藏图片 */ body:hover img{ /* display 隐藏之后标签的位置不会保留 */ /* display: none; */ /* 下面的这几种方式都是保留位置的 */ /* 设置是否可见 visible 可见的 hidden 隐藏的 */ /* visibility: hidden; */ /* 设置透明 opacity 0到1 0表示完全透明 1表示完全不透明 */ opacity: 0.5; } </style> </head> <body> <img src="../img/img2.png" /> <div></div> </body> </html> -
z-index
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 200px; /* 相对于body */ position: absolute; top: 50px; } .div1{ background-color: palevioletred; left: 50px; z-index: 3; } .div2{ background-color: deepskyblue; left: 100px; z-index: 2; } .div3{ background-color: darkcyan; left: 150px; z-index: 1; } /* 鼠标悬浮到标签 z-index发生变化 */ div:hover{ z-index: 4; } </style> </head> <body> <!-- 几个div相对同一个参照物进行定位 然后又叠加部分 当我鼠标悬浮到哪个div哪个div就在最前面 --> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body> </html>
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
