weixin_58665463 2022-09-24 23:28 采纳率: 0%
浏览 44

求！怎么用html和css简单的写出这种效果！

就是鼠标放上去，.jpg上面就盖了一层黑色或者别的随便什么颜色的感觉，就这个效果。应该挺简单的

img


不知道实现这样的效果：hover具体的代码怎么写！有没有完整又具体的代码，让我参考一下啊，谢谢
前几天上课讲过了但是我给忘了，我知道这个对于很多人来说肯定是很简单的东西了 但是对于我来说是一个疑惑。

  • 写回答

2条回答 默认 最新

  • MAXLZ 2022-09-25 00:33
    关注
    <head>
  <style>
    .box {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .box .mask {
      position: absolute;
      display: none;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .7);
    }

    .box .img {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }

    .box:hover .mask {
      display: initial;
    }
  </style>
</head>

<div class="box">
  <div class="mask"></div>
  <img class="img" src="https://img0.baidu.com/it/u=922902802,2128943538&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1664211600&t=fee67140516d0b5c4e7b7afc3fff34c7" alt="" />
</div>
    评论

报告相同问题？

问题事件

  • 创建了问题 9月24日

悬赏问题

  • ¥15 MCNP里如何定义多个源？
  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控：网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 请问这个是什么意思？
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏