Question

我有一个蓝色背景的网站，从上到下。现在我想通过css让蓝色从顶部的最浅蓝色到底部最黑的蓝色。因此，当您向下滚动时，页面基本上会转换为更暗。这可能与css甚至jquery有关吗？我无法在任何地方找到解决方案，我发现的所有示例都是当你将鼠标悬停在它上面并将其转换为效果时，但我想要实现的是在页面加载时发生的背景。这可能与css或jQuery一起使用吗？

Answer 1

您可以使用CSS渐变

来完成此操作

http://www.colorzilla.com/gradient-editor/

是的，只需将背景渐变应用到您想要的样式，如下所示。

正如你所看到的，如果你支持所有的浏览器它可能会变得非常混乱，所以我个人建议用LESS做，但下面应该没问题

body{ background: #162772; /* Old browsers */
background: -moz-linear-gradient(left, #162772 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#162772), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #162772 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #162772 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #162772 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to right, #162772 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#162772', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */  }

Answer 2

虽然每个浏览器都不支持，但我喜欢使用以下渐变方法，因此您只需在一个地方编辑它;背景色

background-color:blue;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));

过渡颜色与背景颜色

2 个答案: