b站pink老师前端代码学习

最新推荐文章于 2022-12-20 16:31:46 发布

lmd666

最新推荐文章于 2022-12-20 16:31:46 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： html5 css

原文链接：https://www.bilibili.com/video/BV14J4114768?p=248

本文介绍了一种使用CSS实现的图片防土豆显示及隐藏效果。通过定位和hover属性，当鼠标悬停在图片上时，会显示一个带有透明度和图标的效果层。文章提供了完整的HTML和CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码都是自己看视频敲得，视频链接在下面

先上效果图

主要用的就是定位，蛮简单的，代码如下

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>防土豆显示及隐藏</title>
       <style>
           .tudou{
               position: relative;
               height: 320px;
               width: 444px;
               margin: 50px auto;


           }
           .tudou img{
               height: 100%;
               width: 100%;
           }
           .mask{
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: rgb(0,0,0,.3) url(img/arr.png) no-repeat center;
           }

.tudou:hover .mask{
display: block;
}

       </style>
   </head>
   <body>
       <div class="tudou">
           <img src="img/tudou.jpg"/>
           <div class="mask"></div>


       </div>
   </body>
</html>