html - 具有渐变和图案图像的 CSS 背景

Question

我试图让我的网站背景具有渐变和重复图案图像。渐变效果很好，如下所示，但如果我删除 background-repeat: no-repeat;渐变不会拉伸(stretch)并每隔几行重复一次。我想在渐变上添加另一个图案图像，但它需要重复，因此与渐变冲突。

我想我可以通过添加一个包含图案图像并拉伸(stretch)到全身的 div 来修复它，但它没有成功。有什么办法可以解决这个问题吗？

body {

...
background-repeat: no-repeat;
background-attachment: fixed;
background-image: linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 5%, rgb(171,205,139) 53%, rgb(171,205,139) 77%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.05, rgb(255,255,255)),
    color-stop(0.53, rgb(171,205,139)),
    color-stop(0.77, rgb(171,205,139))
);}

这就是我尝试重复图案图像的方式

background-image:url('mypattern.png');
background-repeat:repeat;

Answer 1

看起来您很可能需要创建两个元素，其中一个元素绝对位于另一个元素之上。在处理这个问题的 stackoverflow 上有一个类似的问题

链接 CSS gradient above background pattern

编辑

这样的事情可能会奏效

.example3 {
    background-image: url(../images/plus.png), -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b);
    background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}

链接

http://www.heresonesolution.com/2010/09/using-a-css-gradient-and-a-background-image-on-the-same-element/