0

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

我想我可以通过添加一个包含图案图像并延伸到全身的 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;
4

1 回答 1

0

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

LINK 背景图案上方的 CSS 渐变

编辑

这样的事情可能会奏效

.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/

于 2013-09-23T17:41:30.843 回答