Question

我在网站上有两个背景，一个是渐变，其上有一些透明的重复图案。

    html{
         background-color:rgb(57,57,57);
         background-image: url("../repeating-tansparent-pattern.png"), url("../gradient-background.jpg");
}

渐变背景仅为1080px高度。我想拉伸它以适应1800px并保留重复图案。拉伸一个背景很容易，但如何处理这两个？

JSFiddle：http://jsfiddle.net/jkpey91a/

Answer 1

就像您可以指定2个逗号分隔的背景一样，您可以对所有其他background-属性执行相同操作。添加这个：

background-size:auto,cover;
background-position:top left, center;

将产生the intended result。

希望渐变以静态方式填充视口，以及要滚动的片段？易：

background-attachment:scroll,fixed;

Demo here

说完这一切之后，为了兼容性，将渐变放在html和body上的片上当然要容易得多，但是对于CSS3，它可能就是你想要的一切。< / p>

如何拉伸渐变背景以适应页面？

1 个答案: