CSS重复模式与线性渐变

Question

我是第一个使用photoshop模式的方法。我正在建立一个网页，我想用我的模式给我的网页背景带来很好的效果。

我找到的模式是120x120像素

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

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

但是我还没完成。我想在我的页面背景中添加一个线性渐变（dir = top / down col =浅蓝色/绿色），顶部有图案填充图层，混合模式=变暗**。

这是最终效果：

我说到了。

问题： 结合线性垂直渐变效果和我的120x120模式是否有可能找到一种模式，我可以用它来无限地重复自己的垂直和水平??在这种情况下这是一种常见的解决方案？

希望很清楚

感谢

卢卡

Answer 1

或者你可以使用background gradinent 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（透明度），其余类似于普通的十六进制颜色。

Answer 2

申请

html{
    background: url('mypattern.jpg') repeat;
}
body{
    background: url('gradient.png') repeat-x;
    width:100%;
    height:100%;
}

其中gradient.png是你的白色渐变，它对底部变得透明。

Answer 3

Dis将起作用，bg模式具有线性或径向渐变：

background-image: url(images/pattern.png),  -webkit-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  -moz-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  -ms-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  -o-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  radial-gradient(circle at 30% 40%, rgb(20,150,224), rgb(0,0,0));