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

发布于 2024-11-05 11:19:40 字数 631 浏览 0 评论 0原文

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

我发现的图案是120x120像素

在此处输入图像描述

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

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

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

这是最终效果：

在此处输入图像描述

我进入正题了。

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

希望很清楚

谢谢卢卡

，

原文

I'm on my first approach with photoshop patterns.I'm buildin a webpage where I want to use my pattern to give a nice effect to my webpage background.

The pattern I found is 120x120 px

enter image description here

If I was done here I should use this css:

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

But Im not done.Id like to **add to my page's background a linear gradient(dir=top/down col=light-blue/green) with the pattern fill layer on top of it, with blending mode=darken **.

This is the final effect:

enter image description here

I come to the point.

QUESTION:
Combining linear vertical-gradient effect and my 120x120 pattern is it possible to find a pattern that I could use to repeat itself endlessly both vertical and horizontal??which is a common solution in this case?

Hope It's clear

thanks

Luca

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不交电费瞎发啥光 2024-11-12 11:19:40

或者您可以使用背景渐变 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（透明度），其余与正常的十六进制颜色一样。

or you can use 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%);
}

to make it work in IE lte 7 add:

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

color is provided in #aarrggbb format, where aa=alpha(transparency), rest like normal hex color.

回复收藏 0 原文

悲歌长辞 2024-11-12 11:19:40

应用

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

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

Apply

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

where gradient.png is your white gradient which becomes transparent to it's bottom.

回复收藏 0 原文

晚风撩人 2024-11-12 11:19:40

Dis 将起作用，具有线性或径向渐变的背景图案：

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

Dis will work, bg pattern with linear or radial gradient:

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

回复收藏 0 原文

~没有更多了~