具有線性漸變的CSS重復圖案

Question

我正在使用Photoshop模式的第一種方法。我正在建立一個網頁，我想使用該模式為網頁背景賦予良好的效果。

我發現的圖案是120x120像素

如果我在這里完成，則應使用以下CSS：

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

但是我還沒做完。我想**在我的頁面背景上添加一個線性漸變（dir = top / down col = light-blue / green），並在其頂部添加圖案填充層，混合模式=暗**。

這是最終效果：

我說的很對。

問題：結合線性垂直漸變效果和我的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（transparency）與正常的十六進制顏色一樣靜止。

Answer 2

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

Answer 3

應用

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

其中gradient.png是您的白色漸變，對它的底部透明。