在CSS中添加一个Before-After图片

介绍

在CSS中，使用Before-After伪元素可以在样式中插入额外的内容。这个特性通常用于添加图标、装饰性的元素或下拉箭头等。在此外，我们也可以用Before-After伪元素添加一组before-after图片。这可以通过CSS背景属性和content属性实现。

步骤

以下是实现一个Before-After图片的步骤：

1. 在HTML中，设置一个包含before-after图片的容器元素。这容器元素应有一个随意的宽度和高度，并且必须具有“position: relative”属性。这个属性允许我们相对于此元素相对定位它的before-after伪元素，并确保在placeholder之前只有一个任意的元素。

   <div class="container">
      <img src="before.jpg" alt="" class="before">
      <img src="after.jpg" alt="" class="after">
   </div>
   

2. 确保添加显式的宽高，使容器元素和before-after图像具有相同的长宽比。添加样式以隐藏after图片，仅在:hover时显示。

   .container {
      position: relative;
      width: 500px;
      height: 300px;
   }
   
   .before, .after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
   
   .after {
      opacity: 0;
   }
   
   .container:hover .after {
      opacity: 1;
   }
   

   在上面的示例中，.before和.after的共同点是它们都使用fill容器的各个部分。容器中设置了object-fit: cover，这可以保持这两个影像元素的方面比例。在.after中，我们添加了一个透明度透明的设置以隐藏它，有hover伪类调整.opacity感动滑动鼠标，把.after图片的透明度变为1，显示在下面的layer中。

总结

通过上述步骤，我们可以为任何元素添加before-after图片。需要理解它是一个伪元素，并且必须包含在一个包含元素之内，在包含元素中设置这个伪元素的路径。

返回的代码片段：

```html
<div class="container">
   <img src="before.jpg" alt="" class="before">
   <img src="after.jpg" alt="" class="after">
</div>

.container {
   position: relative;
   width: 500px;
   height: 300px;
}

.before, .after {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.after {
   opacity: 0;
}

.container:hover .after {
   opacity: 1;
}