css 怎么做图片的倒影

CSS是一种常用的前端技术，借助它我们可以实现很多华丽的效果，比如图片的倒影。接下来，我们将介绍利用CSS来创建图片倒影效果的方法。

code>
/* 首先，我们需要在CSS中定义使用倒影效果的容器及其子元素 */.reflection {
      position: relative;
}
.reflection img {
      position: absolute;
      bottom: 0;
}
/* 然后，我们需要创建倒影效果的容器和子元素 */.reflection:after {
      content: "";
      position: absolute;
      width: 100%;
      top: 100%;
      left: 0;
      background: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
      z-index: 2;
}
.reflection img:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-image: inherit;
      background-position: 0 100%;
      transform: scaleY(-1);
      opacity: 0.3;
      z-index: 1;
}
    /code>
    

代码解释：

首先，我们需要在CSS中定义使用倒影效果的容器及其子元素。容器（.reflection）需要使用相对定位，图片（.reflection img）需要使用绝对定位，并且底部对齐。

然后，我们需要创建倒影效果的容器和子元素。使用 :after 伪元素，在容器底部创建一个渐变背景，实现“倒影”的效果。图片同样需要使用 :after 伪元素，继承容器的背景图片，并将其垂直翻转（transform: scaleY(-1)），并降低透明度（opacity: 0.3），以增强“倒影”的真实感。

如果你的图片和容器大小不一致，可以将 .reflection 容器的高度设置为图片的两倍，以保证倒影效果完整。

现在，你已经学会了用CSS来创建图片倒影效果。赶紧试试吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！