html - 具有线性渐变的 CSS 重复模式

Question

我正在尝试使用 photoshop 图案。我正在构建一个网页，我想在其中使用我的图案为我的网页背景提供不错的效果。

我找到的图案是 120x120 像素

如果我在这里完成我应该使用这个 css:

background-imag:url(mypattern.jpg);
background-repeat:repeat;

但我还没有完成。我想在我的页面背景中**添加一个线性渐变(dir=top/down col=light-blue/green)，上面有图案填充层，混合模式=darken **.

这是最终效果:

我说到重点了。

问题: 结合线性垂直渐变效果和我的 120x120 图案是否可以找到一种图案，我可以使用它在垂直和水平方向上无限重复自己？在这种情况下，这是一种常见的解决方案吗？

希望一切都清楚

谢谢

卢卡

Answer 1

或者你可以使用背景渐变css3

body { background: url('pattern.jpg') repeat;}
#container {
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
}

使其在 IE lte 7 中工作添加:

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFFFF', EndColorStr='#00FFFFFF')

颜色以 #aarrggbb 格式提供，其中 aa=alpha(透明度)，与普通的十六进制颜色一样。