为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并使用渐变来遮盖图像：

This Example显示了这两种技巧。 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);
}