伪元素中遮罩层的简单使用

最新推荐文章于 2023-06-03 17:58:22 发布

wu520xin

最新推荐文章于 2023-06-03 17:58:22 发布

阅读量746

点赞数

在HTML中创建一个div，命名为box，然后在里边再建一个div命名为box1，然后进行如下设置。

 
  .box{ 
 
  width: 
  50px; 
 
  height: 
  50px; 
 
  background: 
  #333; 
 
  position: 
   relative; 
 
 .box{ 
 
width:50px; 
 
height:50px; 
 
background:#333; 
 
position: relative; 
 
 } 
 
 .box1{ 
 
     width: 100%; 
 
     height: 100%; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     background: #fff; 
 
     opacity: 0; 
 
 } 
 
 .box1:hover{ 
 
     opacity: .6; 
 
 } 
 
   } 
 
  .box1{ 
 
  width: 
  100%; 
 
  height: 
  100%; 
 
  position: 
  absolute; 
 
  top: 
  0; 
 
  left: 
  0; 
 
  background: 
  #fff; 
 
  opacity: 
  0; 
 
   } 
 
  .box1:hover{ 
 
  opacity: 
  .6; 
 
   }