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修复它，但正如你在小提琴中所看到的那样它不起作用。如何使渐变透明？

另一个重要问题是不要突出显示该颜色的作品：thanks to Hashem for his :after solution.

Answer 1

实际上，你正在覆盖方块本身的背景颜色，以便rgba()在这种情况下不会产生预期的效果。

您可以使用伪元素在方块顶部应用渐变，如下所示：

<强> EXAMPLE HERE

.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%);
}

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

1 个答案: