jquery - 为 div 反射赋予更多风格

Question

我正在尝试使用以下 css 向 div 添加反射。

CSS ::

   div.reflection
{
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    opacity:0.6;
    background-color: red;
    position:absolute;
    top:82%;
    height:30%;
    width:100%; 

}

反射即将到来，但它只是以较低的不透明度值翻转图像。如何为反射添加更多样式，我想如下图所示进行反射。

但是用我的css我得到了这个，

Answer 1

有几种可能实现这一目标：

您可以定义一个 svg（或渐变图像）并用它来遮盖反射图像，甚至可以使用mask-image property并使用渐变来遮盖图像：

这个例子展示了这两种技术。Webkit 使用

div::after{
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
}

和 Firefox 带有面具的 svg：

<svg>
  <defs>
    <linearGradient id="gradient" x1="0" y1="0%" x2 ="0" y2="100%">
      <stop stop-color="black" offset="0"/>
      <stop stop-color="white" offset="1"/>
    </linearGradient>
    <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
    </mask>
  </defs>
</svg>

div::after{
   mask: url(#mask);
}