0

在大家的帮助下。我对 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）。也不需要图像使用。

4

2 回答 2

2

要显示两种渐变，您需要在顶部设置半透明。

演示

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 支持，您需要双重声明(Chrome<10)

使用具有多个 bgs的单个 div ：

演示

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

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

于 2012-10-15T10:12:27.643 回答
1

你的问题是你实际上只使用-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

于 2012-10-15T09:57:21.310 回答