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

发布于 2018-09-29 字数 5097 浏览 993 评论 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技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!