正确突出显示具有透明径向渐变的正方形

Question

我正在尝试突出显示具有径向渐变效果的正方形。 我创建了以下css规则：

.highlight-move {
    background-color: #75f547;
    background-image: -webkit-radial-gradient(center center, circle cover, #75f547, #fff 100%);
    background-image:         radial-gradient(center center, circle cover, #75f547, #fff 100%);    
}

问题是我的渐变不是透明的： jsFiddle ，因此正方形上有白色背景。

我以为我可以用rgba修复它，但是正如您在小提琴中看到的那样，它不起作用。 如何使我的渐变透明？

另一个重要的问题是不要突出显示该颜色的颜色： 感谢Hashem的：after解决方案。

Answer 1

实际上，您是在覆盖正方形本身的背景色，以使rgba()在这种情况下无法获得理想的效果。

您可以使用伪元素将渐变应用到正方形的顶部，如下所示：

这里的例子

.highlight-move:after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0; /* set dimensions up to the parent */

    background: #75f547;
    background: -webkit-radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);
    background:         radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);
}