Question

在大家的帮助下。我不是CSS新手，但对这个问题不熟悉。我真的很想使用CSS渐变属性。但我需要的方式是我需要设置从下到上和从右到左的渐变。就像滚动条一样，在页面的右下角。我创建了从头到尾的一个类，从右到左一个类。 Simpe CSS概念用最新的风格覆盖。

我该如何处理这种情况。我尝试的方式如下：

.bottom_to_top{background: -webkit-linear-gradient(center top, #FFFFFF 95%, #80868E 100%);}
.right_to_left{-webkit-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);}

我已经调用了这两个类，但只有一个被另一个类覆盖。我怎样才能解决这个问题。没有浏览器兼容性（仅适用于Chrome）。不需要图像使用。

Answer 1

要显示两个渐变，您需要在顶部渐变上显示半透明度。

Demo

CSS：

.bottom_to_top{
    background: -webkit-gradient(linear, center top, center bottom, color-stop(95%, #FFFFFF), color-stop(100%, #80868E));
    background: -webkit-linear-gradient(top, #FFFFFF 95%, #80868E 100%);
}
.right_to_left{
    background-image: -webkit-gradient(linear, left center, right center, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(95%, rgba(255, 255, 255, 0.5)), color-stop(100%, #80868E));
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 95%, #80868E 100%);
}

请注意.right_to_left使用rgba代替hex。根据您的需要进行调整（您可以使用简单的在线生成器，如visualcsstools）。

此外，要获得完整的Chrome支持，您需要double declaration（Chrome＆lt; 10）

使用单个div，multiple bgs：

Demo

.gradients{
    background:-webkit-gradient(linear, left center, right center, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(95%, rgba(255, 255, 255, 0.5)), color-stop(100%, #80868E)), -webkit-gradient(linear, center top, center bottom, color-stop(95%, #FFFFFF), color-stop(100%, #80868E));
    background:-webkit-linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 95%, #80868E 100%),  -webkit-linear-gradient(top, #FFFFFF 95%, #80868E 100%);
}

正如您可以在前面的中看到第一个声明，而第二个声明是背景。

Answer 2

您的问题是您实际上只使用-webkit-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);而应该使用

-webkit-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);
-o-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);
-moz-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);

IE对渐变很棘手，你必须使用filter

线性渐变CSS

2 个答案: