css设置hover时改变盒子背景图片的透明度，但不改变盒子文字的透明度

最新推荐文章于 2024-04-26 19:17:54 发布

东之建大坏蛋

最新推荐文章于 2024-04-26 19:17:54 发布

阅读量2.3k

点赞数 1

分类专栏：前端优化文章标签： css css3 html

本文链接：https://blog.csdn.net/WanweI897/article/details/122667941

版权

前端优化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

之前看到别人有用after伪元素来给图片添加透明度的写法，没有与hover相关联，于是我重新写了一下。用这种方法我们就可以用一张图片实现两种状态，减少资源的请求。

<style>
    div{
      position: relative;
      width: 100px;
      height: 25px;
      cursor: pointer;
    }
    div::after {
      position: absolute;
      content: '';
      background: url('./start.png');
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
    }
    div:hover::after{
      opacity: 0.5;
    }
</style>
<body>
  <div>点击跳转</div>
</body>