CSS3 实现条纹斜线方格背景纹理

发布于 2018-09-29 22:25:32 字数 4220 浏览 3585 评论 0

CSS3 给了我们很多新的特性,其中不乏有些很炫的功能,像背景图的设置,一直是我们讨论和应用的一个亮点,CSS3 中增加了对背景的控制,不在是使用一个单一的背景图,在 CSS3 的控制下,可以使用多个背景图,添加更炫的效果和视觉体验,今天就给大家说说使用 CSS3 实现条纹斜线方格背景纹理的方法代码。

实现原理

主要是应用了两个 CSS3 的属性,一个是 linear-gradient,即线性渐变,另外一个就是 background-size,用来确定渐变的尺寸。

background-size 顾名思意就是背景的尺寸。如果没有 background-size 的限制,渐变背景就会从上走到下(或从左走到右),100% 覆盖。

渐变这玩意就跟 Photoshop 中的渐变一样,尤其 Webkit 内核浏览器下那个有些难搞的 color-stop 就是下面这货了:

FireFox/Opera浏览器下的颜色过渡点直接就是百分比或是像素值,类似于上面的color-stop了。

回到本文实例,为了限制所有渐变图案的大小,我们统一将渐变尺寸限制为 50 像素,于是就有了 Demo 页面中的这部分 CSS 代码了:

-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px; /* 控制条纹的大小 */

如果没有 background-size 的限制,那么上图中的两个重复条纹就会变成下面许秀琴般纯洁的模样:

下面说说渐变的事件,那上面最简单的有些土黄的垂直条纹来说吧。其渐变相关的 CSS 代码如下:

background-color: #f90;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

这里的条纹实现的方法是很聪明的,如果按照我们photoshop中制作渐变的习惯,可能相关的CSS代码应该是下面这样子:

background-image: linear-gradient(0deg,  #ffad33 0, #ffad33 50%, #f90 50%, #f90 100%);

而这里的实现是直接关心 50% 中点处,设置一个透明度为 20% 的白色断点,然后直接映在背景上。不可不谓轻巧简便,重用性高。

最后讲下最复杂的例子,就是那个黑白斜纹了,其相应的渐变代码如下:

background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
                  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
                  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
                  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
                  -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
                  -moz-linear-gradient(45deg, transparent 75%, #555 75%),
                  -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
                  -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
                  -o-linear-gradient(45deg, transparent 75%, #555 75%),
                  -o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
                  linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
                  linear-gradient(45deg, transparent 75%, #555 75%),
                  linear-gradient(-45deg, transparent 75%, #555 75%);

不要看上面的代码好像建楼房一样,架得老高老高。其实就是东南,东北,西南,西北四个方向同时画个黑色 的边角(等腰直角三角形),中间透明镂空。因为 Demo 页面背景色是白色,所以就会使黑白间隔效果,如果使用小 Bug 将 Demo 页面的背景色换一换,则就像是卸了妆的非主流模样大变,例如背景换成和谐的绿色:

结束语

CSS3 有那么多令人欣喜若狂的属性,很显然的各种 CSS3 下的相关技术必定雨后春笋般大量出现,以后的 Web 就是只要想不到,没有做不到的效果。

本文的这个条纹效果可以说是最最简单的相关应用了。我们只要稍微再发散下,可以实现很多其他更精妙的东西。例如木纹质感的背景,或是金属质感的背景,这些效果完全可以通过 CSS 实现,这就看你的创造力有多少了。

CSS3的时代即将迈入,很多技术都是空白,这真是我们前端的机遇,首创某些新技术的机遇。

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

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

4401 文章
128 评论
84972 人气
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。