css - 线性渐变 CSS

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

如您所见，第一个声明在前面，而第二个声明在背景。