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