Question

我正在尝试让我的网站背景有渐变和重复的图案图像。渐变效果如下，但如果我删除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;

Answer 1

看起来你很可能需要创建一个绝对位于另一个上面的两个元素。这里有一个关于stackoverflow处理这个问题的类似问题

LINK 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));
}

LINK

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

CSS背景与梯度和模式图像

1 个答案: