[分享]css全透背景图放大镜小图标

在前端开发中，常常需要实现图片放大镜功能。使用CSS全透背景图可以实现一个简单的小图标，当鼠标移动到它上面时，会弹出一个放大镜。下面我们将介绍如何使用CSS实现这个功能。 .icon { width:...

在前端开发中，常常需要实现图片放大镜功能。使用CSS全透背景图可以实现一个简单的小图标，当鼠标移动到它上面时，会弹出一个放大镜。下面我们将介绍如何使用CSS实现这个功能。

 .icon {
    width: 50px;
    height: 50px;
    background: url(图片路径) no-repeat;
    background-size: contain;
    position: relative;
  }
  
  .icon:hover:after {
    content: "";
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    background: url(图片路径) no-repeat;
    background-size: 500px 500px;
    top: 0;
    left: 100%;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    z-index: 999;
  } 

首先我们需要定义一个类名为“icon”的元素，并设置它的宽度、高度和背景。这个元素需要设置为相对定位。接着，在hover状态下，我们需要设置一个伪元素:after，并给它设置样式。

在伪元素的样式中，需要设置content属性为空字符串，这样才能创建出伪元素。设置display属性为block，让它以块级元素的形式出现。为了让这个伪元素再父元素的正右方出现，我们需要设置left为100%。由于这时候伪元素紧贴着父元素的右侧，我们需要将它向左移动50%，这样就可以将它的中心点与父元素的中心点重合。

接下来，我们需要给伪元素设置一个圆形的边框，这可以通过设置border-radius实现。我们需要将它向上移动50%和左移50%，这样才能将它的中心点与鼠标所在的位置重合。我们还需要将它的z-index属性设置为999，这样就可以将它置于所有其他元素的顶层。

最后，我们需要为伪元素设置一个阴影效果，这可以通过设置box-shadow属性实现。这样就完成了图片放大镜的实现。