具有线性渐变的 CSS 重复模式答案

【问题标题】：CSS repeat pattern with linear gradient具有线性渐变的 CSS 重复模式
【发布时间】：2011-05-08 18:25:21
【问题描述】：

我是第一次使用 Photoshop 模式。我正在构建一个网页，我想在其中使用我的模式为我的网页背景提供一个很好的效果。

我发现的图案是120x120像素

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

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

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

这是最终效果：

我来了。

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

希望很清楚

谢谢

卢卡

【问题讨论】：

标签： html css repeat

【解决方案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)，其余为普通十六进制颜色。

【讨论】：

这个方法可以跨浏览器吗？？
@luca，是的，IE lte 7 除外

【解决方案2】：

申请

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

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

【讨论】：

我的渐变不是白色..是浅蓝色/绿色。在 Photoshop 中，我在图层上添加了图案填充，混合模式变暗。它仍然是您的有效解决方案吗？=)
没关系。关于渐变唯一重要的是它应该是.png格式（还有其他合适的格式，但是png有更多的优势）并且它应该是部分透明的（顶部多，底部少）
我不认为我理解。在 Photoshop 中，效果是由两层完成的：底层是渐变（浅蓝色到绿色），顶层是混合模式=变暗的图案填充。

【解决方案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));

【讨论】：