怎么把CSS背景图玩出花来-CFANZ编程社区

系列文章目录

ES5 VS ES6 之类的写法

ES6 Proxy为何物？

ES6 两种方式实现可迭代对象

前言

最近在学CSS，看到个比较好玩的东西——背景图，我们其实是可以通过CSS来画出一些好看的背景图案的

原理

linear-gradient翻译过来是线性渐变的意思

那这个东西怎么用呢？

我们可以：

background: linear-gradient(to right,颜色[空格百分比可选],...)

to 后面的参数如果是right就是从左到右渐变，以此类推

然后是颜色，然后如果要控制颜色在哪个区域可以加个百分比，第一个颜色是0，最后一个颜色是100%

background:linear-gradient(数字deg,颜色[空格百分比可选],...)

deg这种写法个人感觉可玩性更高，数字deg可以理解为角度，0deg是从下到上渐变，45deg是斜45°横推过去渐变，以此类推。如果觉得难以理解可以请出左手，手掌向上是0deg，手掌顺时针45°是45deg

示例

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .c1 {
            height: 100px;
            /*background: linear-gradient(45deg, red 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,red 100%),*/
            /*linear-gradient(135deg,transparent 0,transparent 49.5%,black 49.5%,black 50.5%,transparent 50.5%,transparent 100%);*/
            background: linear-gradient(45deg, transparent 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),
                        linear-gradient(135deg,transparent 0,transparent 49.5%,black 49.5%,black 50.5%,transparent 50.5%,transparent 100%);
            background-size: 50px 50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

图中一个框框就是50px*50px的大小，linear-gradient是可以叠加的，知道基本原理后我们试试怎么整小活

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .c1 {
            height: 100px;
            background: linear-gradient(45deg, red 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,red 100%),
            linear-gradient(135deg,transparent 0,transparent 49.5%,black 49.5%,black 50.5%,transparent 50.5%,transparent 100%);
            /*background: linear-gradient(45deg, transparent 0,transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),*/
            /*            linear-gradient(135deg,transparent 0,transparent 49.5%,black 49.5%,black 50.5%,transparent 50.5%,transparent 100%);*/
            background-size: 50px 50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>