如何把css渐变背景玩出花样来

·  阅读 2390
如何把css渐变背景玩出花样来

这是我参与更文挑战的第2天,活动详情查看: 更文挑战

前言

不得不说,随着蓝湖,摹客等UI设计共享平台的发展,前端一些css的样式手写的时候也变得生疏起来。相对于选中某个设计图的元素,直接就能复制css代码来说,前端开发自己手写css变得低效。并且前段时间有的设计平台甚至推出了设计图转整张html代码,还可以自定义基于vue或者react框架等主流框架,虽然实践操作并没有介绍的那么神奇好用,但是相信不久的未来,写静态页面这种事情都会由平台自动生成了~

未来是美好的,不过目前来说,一些基础的css样式还是需要前端开发者熟练掌握的。无论是更改代码还是和同事探讨问题,扎实的基本功总是开发者必备的。所以今天大冰块就整理复习一下css中渐变背景的属性,博客主要从 条纹背景复杂花色背景 两方面来详细介绍。


基础知识

首先我们需要复习一下 background: linear-gradient() 的基础知识, background: linear-gradient() 用于创建多种颜色线性渐变的背景图案。

background: linear-gradient(direction(可省略,默认是to bottom,即向下), color stop(渐变的颜色 颜色开始位置 颜色结束位置), color stop(渐变的颜色 颜色开始位置 颜色结束位置), ...) 
复制代码

background: linear-gradient(#f55 0% 50%, #55f 50% 80%, #5f5 80% 100%);

0% —— 50%的区间是颜色 #f55 纯色;

50% —— 50% 的区间是颜色 #f55 到颜色 #55f 的线性渐变(看起来直接变化,没有渐变);

50% —— 80% 的区间是颜色 #55f 纯色;

80% —— 80% 的区间是颜色 #55f 到颜色 #5f5 的线性渐变(看起来直接变化,没有渐变);

80% —— 100% 的区间是颜色 #5f5 纯色。

其中第一个颜色的开头的0%和最后一个颜色末尾的100%可以省略,即: background: linear-gradient(#f55 50%, #55f 50% 80%, #5f5 80%);

那么上面这行代码中重复的 50%80% 能不能简化呢?答案是可以的:

如果某颜色的起始位置比在它之前的颜色结束位置还要小,那么这个颜色的实际起始位置为在它之前的颜色的结束位置。

这就意味着上述这行代码可以改为:

background: linear-gradient(#f55 50%, #55f 0 80%, #5f5 0);

了解了 linear-gradient 的使用,来具体看一下实际操作吧!

默认的渐变范围(0% —— 100%)

例如:

width: 500px;
height: 500px;
background: linear-gradient(#f55, #55f);
复制代码

0% —— 100% 的范围是 #f55#55f 的渐变;

如下图所示:

image.png

手动设置渐变范围

我们把上面的 background: linear-gradient(#ff0, #f0f); 改为 background: linear-gradient(#f55 50%, #55f 90%); ,则:

0% —— 50% 的范围是 #ff0 纯色;

50% —— 90% 的范围是#f55#55f 的渐变;

90% —— 100% 的范围是 #f0f 纯色。

如下图所示:

image.png

渐变范围为0

那么,如果我们把渐变范围改为 0 会怎么样呢?比如渐变范围是 50% —— 50% 的时候。

我们把上面的 background: linear-gradient(#ff0, #f0f); 改为 background: linear-gradient(#f55 50%, #55f 0); ,则:

0% —— 50% 的范围是 #ff0 纯色;

50% —— 50% 的范围是#f55#55f 的渐变(相当于无渐变范围);

50% —— 100% 的范围是 #f0f 纯色。

如下图所示:

image.png

渐变方向

默认的渐变方向是从上到下,即 to bottom 由上到下,direction 取值可为:

to top: 由下到上;

to right: 由左到右;

to bottom: 由上到下;

to left: 由右到左;

to right bottom: 由左上角到右下角;

to left bottom: 由右上角到左下角;

to left top: 由右下角到左上角;

to right top: 由左下角到右上角;

如下图所示:

image.png

更改渐变生成背景图案的大小

本质上线性渐变是代码生成的背景图案,所以它同样适用于背景图案的属性,我们给当前示例设置 background-size: 100% 50px; background-repeat: no-repeat;,可以更改背景图案高度为50px,no-repeat 保证背景图案只显示一次,不平铺。

如下图所示:

image.png


好了,掌握了 linear-gradient 基本的使用方法,下面我们就可以开始愉快地制作我们的水平条纹和垂直条纹了~

水平条纹和垂直条纹

看完上面的示例,我觉得完成想要水平条纹和垂直条纹的话,简直是轻轻松松不在话下。

水平条纹:

.box{
    width: 200px;
    height: 200px;
    background: linear-gradient(#f55 50%, #55f 0);
    background-size: 50px 100%;
}
复制代码

如下图所示:

image.png

垂直条纹:

旋转角度为 90deg 、渐变方向为 to left 、或者渐变方向为 to right 均可。

.box{
    width: 200px;
    height: 200px;
    background: linear-gradient(90deg, #f55 50%, #55f 0);
    background-size: 50px 100%;
}
复制代码

如下图所示:

image.png


斜条纹

斜条纹是怎么做的呢,如果我想要一个倾斜角度为45度的背景图案,直接把旋转角度改为 45deg 可以吗?我们一起来试一下:

.box{
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #f55 50%, #55f 0);
    background-size: 50px 100%;
}
复制代码

如下图所示:

image.png

惊不惊喜?意不意外??为什么变成了这个样子呢???

我们把 background-repeat: no-repeat; 加上,就能看明白了,图案背景不平铺的情况下,是这个样子:

image.png

我们要的斜条纹图案背景,实际上是每一小块背景图案平铺之后产生的,所以我们把背景图案宽高都设为50px,代码改成这样看一下:

.box{
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #f55 50%, #55f 0);
    background-size: 50px 50px;
}
复制代码

如下图所示:

image.png

还是不对,我们发现,每一小块背景图案平铺之后没有和旁边的背景图案颜色对齐,每一小块的背景图案分割后的颜色首尾应该对应起来,那么我们改成如下代码:

.box{
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #f55 25%, #55f 0 50%, #f55 0 75%, #55f 0);
    background-size: 50px 50px;
}
复制代码

如下图所示:

image.png

看起来似乎没什么问题,但是如果我们想要把倾斜角度改为60度呢?

.box{
    width: 200px;
    height: 200px;
    background: linear-gradient(60deg, #f55 25%, #55f 0 50%, #f55 0 75%, #55f 0);
    background-size: 50px 50px;
}
复制代码

如下图所示:

image.png

又有问题了,这说明通过改变背景图案的旋转角度是不行的,而实际上,如果我们想通过 background: linear-gradient() 来设置斜条纹的背景图案是很不方便的,如果你需要让背景图案旋转特定的角度,就需要进行一定的计算,想要实现不同的角度的斜条纹,可以使用重复的线性渐变: repeating-linear-gradient() 来解决这个问题:

.box{
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(60deg, #f55 5%, #55f 0 15%, #f55 0 25%);
}
复制代码

如下图所示:

image.png

如果要指定背景图案的宽度,直接把 % 改为 px 即可,不同的效果可以参考demo多尝试~


复杂的花色背景

看到这里是不是觉得只做条纹背景太简单了,想要挑战一下高阶玩法?来和大冰块一起做一些复杂的背景图案吧~

网格背景图案

单个的渐变效果看起来可能并不是那么神奇,不过复杂的效果总是由简单的效果积累而成的,如果我们给同一个盒子背景同时设置多个渐变背景图案,神奇的效果就出来了~

等宽方格背景图案

.box{
    width: 200px;
    height: 200px;
    background-color: #fff;
    background-image: linear-gradient(rgba(85, 85, 255, 0.5) 50%, transparent 0), linear-gradient(to right,rgba(85, 85, 255, 0.5) 50%, transparent 0);
    background-size: 45px 45px;
}
复制代码

如下图所示:

image.png

网格线分割背景图案

同样的道理,我们也可以做一个网格线分割的背景图案,网格线设置为 1px

.box{
    width: 200px;
    height: 200px;
    background: #55f;
    background-image: linear-gradient(#fff 1px, transparent 0), linear-gradient(to right, #fff 1px, transparent 0);
    background-size: 40px 40px;
}
复制代码

如下图所示:

image.png

精细的网格线分割背景图案

单纯的网格分割背景谈不上神奇,如果我们把两个网格线叠加起来,会产生什么样的效果呢?

.box{
    width: 400px;
    height: 400px;
    background: #55f;
    background-image: linear-gradient(#fff 2px, transparent 0), linear-gradient(to right, #fff 2px, transparent 0), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 0), linear-gradient(to right, rgba(255, 255, 255, 0.3) 1px, transparent 0);
    background-size: 60px 60px, 60px 60px, 20px 20px, 20px 20px;
}
复制代码

如下图所示:

image.png

代表透明背景色的棋盘图案

我们也可以再想一下,如何做一个代表透明背景色的棋盘图案?思路就是用两层背景重叠起来,两层背景图案都是 直角等腰三角形 ,第一层背景生效的基准点为左上角,第二层背景生效的基准点为自身的 1/2 。这样一来,两层背景图案 重叠展示的图案即为正方形 ,配合底色的 #eee ,即可生成代表透明背景色的棋盘图案。

.box{
    width: 200px;
    height: 200px;
    background: #eee;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
    background-position: 0 0, 20px 20px;
    background-size: 40px 40px;
}
复制代码

如下图所示:

image.png

如果我们再改一下背景图案的倾斜角度,使多个背景重叠,再加一些其他的属性,如把混合模式改为正片叠底(有摄影修图经验的可能会熟悉这个) background-blend-mode: multiply; ,可能也会有意想不到的收获哦。

.box{
    width: 400px;
    height: 400px;
    background: repeating-linear-gradient(-45deg, transparent, transparent 25%, #f55 0, #f55 50% ), repeating-linear-gradient(45deg, transparent, transparent 25%, #55f 0, #55f 50% ), #efb;
    background-size: 200px 200px;
    background-blend-mode: multiply;
}
复制代码

如下图所示:

image.png

后记

css的属性其实还是蛮多的,很多样式被我们忽视的样式也很有意思。像渐变属性其实可以玩出很多花样来,有的时候并不一定要让UI切图,css也能解决很多问题。文章写了好久才写了这些,看起来虽然很浅显,但实际上我在写文章写demo的过程中学到的远远不止这些。

不得不说,输出其实比学习还要难,一起和大冰块加油吧!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改