关于前端:原来CSS的background还可以这么玩

48次阅读

共计 7907 个字符，预计需要花费 20 分钟才能阅读完成。

身为一个前端开发者，背景是开发中的常客。大到整个网站的主题背景，小到一个按钮的背景。CSS 的 background 属性基本上每天开发都会遇到，绝大多数状况下咱们都只会应用到了纯色背景或者图片背景。如果你想让你开发的内容看起来更加生动有趣，通过本文让你用纯 CSS 也能够开发出炫酷的背景。

开始之前

在开始之前，先请你答复上面的问题，如果你能全副答复正确，阐明你对 background 属性把握的还不错哦！

1. 径向突变默认形态是什么？

A：原型 B：椭圆形

2. background 属性的值为多个时，哪个值的图层在最顶部？

A：第一个值 B：最初一个值

3. background: green, linear-gradient(red, pink); 成果是什么？

A：绿色背景 B：红粉突变背景 C：没有背景

4. 当 background 属性有多个值时，如何指定每层背景的大小？

根底背景

首先还是先回顾一下根底背景有哪些，最简略的就是 纯色背景：

background: pink;

线性突变，当然你还能够自定义方向：

.linear {background: linear-gradient(red, pink);
}
.linear1 {background: linear-gradient(145deg, red 20%, pink);
}

径向突变

background: radial-gradient(red, pink);

角向突变

background: conic-gradient(red, pink);

根底背景扩大

纯色背景就没什么可说的了，只能扭转色彩。

线性背景

对于 线性背景，咱们能够设置多种色彩，还能够指定每种色彩的绘制地位：

background: linear-gradient(-50deg, #F7A37B, #F7A37B, #FFDEA8, #FFDEA8, #D0E4B0, #D0E4B0, #7CC5D0, #7CC5D0, #00A2E1, #00A2E1, #0085C8, #0085C8);

background: linear-gradient(
    -50deg, 
    #F7A37B, 
    #F7A37B, 
    #FFDEA8, 
    #FFDEA8 20%, 
    #D0E4B0, 
    #D0E4B0,  
    #00A2E1 20%, 
    #00A2E1, 
    #0085C8, 
    #0085C8
);

当初看起来每种色彩之间都是有肯定的过渡成果的，通过管制每种色彩绘制的地位，能够打消掉过渡成果：

background: linear-gradient(
    -50deg,
    #F7A37B,
    #F7A37B 10%,
    #FFDEA8 10%,
    #FFDEA8 20%,
    #D0E4B0 20%,
    #D0E4B0 30%,
    #7CC5D0 30%,
    #7CC5D0 40%,
    #00A2E1 40%,
    #00A2E1 50%,
    #0085C8 50%,
    #0085C8 60%
);

然而蓝色占了一大块，并不美观，一组色彩通过应用反复背景能够达到令人满意的成果。

background: repeating-linear-gradient(
    -50deg,
    #F7A37B,
    #F7A37B 1em,
    #FFDEA8 1em,
    #FFDEA8 2em,
    #D0E4B0 2em,
    #D0E4B0 3em,
    #7CC5D0 3em,
    #7CC5D0 4em,
    #00A2E1 4em,
    #00A2E1 5em,
    #0085C8 5em,
    #0085C8 6em
);

径向背景

反复背景在径向中同样耐看

background: repeating-radial-gradient(
    #F7A37B,
    #F7A37B 1em,
    #FFDEA8 1em,
    #FFDEA8 2em,
    #D0E4B0 2em,
    #D0E4B0 3em,
    #7CC5D0 3em,
    #7CC5D0 4em,
    #00A2E1 4em,
    #00A2E1 5em,
    #0085C8 5em,
    #0085C8 6em
);

当宽高不同时，会呈现出椭圆形，如果你想让图案为原型，能够指定 repeating-radial-gradient 的第一参数为 circle。

background: repeating-radial-gradient(
    circle,
    #F7A37B,
    #F7A37B 1em,
    #FFDEA8 1em,
    #FFDEA8 2em,
    #D0E4B0 2em,
    #D0E4B0 3em,
    #7CC5D0 3em,
    #7CC5D0 4em,
    #00A2E1 4em,
    #00A2E1 5em,
    #0085C8 5em,
    #0085C8 6em
);

调整第一个参数，你能够失去不同的图案

第一个参数除了能够指定园的类型外，还能够定义突变大小以及地位：

background: repeating-radial-gradient(100% 100% at 30% 30%,#F7A37B,#F7A37B 1em,#FFDEA8 1em,#FFDEA8 2em,#D0E4B0 2em,#D0E4B0 3em,#7CC5D0 3em,#7CC5D0 4em,#00A2E1 4em,#00A2E1 5em,#0085C8 5em,#0085C8 6em);
background: repeating-radial-gradient(100% 200% at 40% 40%,#F7A37B,#F7A37B 1em,#FFDEA8 1em,#FFDEA8 2em,#D0E4B0 2em,#D0E4B0 3em,#7CC5D0 3em,#7CC5D0 4em,#00A2E1 4em,#00A2E1 5em,#0085C8 5em,#0085C8 6em);

定义模式为：size at positon

  • position : 定义圆心地位，默认值为 center，能够设定为top、bottom、left、right，也能够应用坐标示意
  • size：定义突变大小，如 100% 200%，它示意的意思是横向放弃，纵向在原来的根底上扩大一倍。因而下面的第二张图原本是椭圆形，当初出现为圆形。

要害知识点

size 不要误会为是缩放比例，下面的 100% 200% 与 5% 10% 的成果一样的，并不是绝对于原来的大小进行缩放，大小在指定色彩的时候进行设定。

你如果设置为 500% 500%，其成果与未设置该值是雷同的，其体现应该是：在较大的值的方向上（第一个值大时为横向，第二个值大时为纵向），放大 较大的值 / 较小的值 倍。

角向突变

把 div 圆角设为 50%，首尾色彩雷同，一个色盘就进去了

background: conic-gradient(red, orange, yellow, green, teal, blue, purple, red);
border-radius: 50%;

组合背景

background 属性能够同时设置多个背景，多个背景互相叠加能够组合出微妙图案。

制作这种类型的背景，有两点须要留神：

  • 通过 background-size 属性设置每个背景的大小；
  • 奇妙使用通明色 transparent

拿第二个背景来作为例子解说，它的过程如下：

第一步：边框

这里能够应用背景来设置，应用 border 和 box-shadow 的形式更加简略

border-radius: 50%;
border: 1px solid #00caf5;
box-shadow: 0 0 0 10px rgba(255,255,255,0.8) inset;

第二步：小球

通过 background-size 设置背景宽高都为 30px，而后通过 radial-gradient 绘制小球。其中蓝色是从圆心到半径为 9px 的中央，大于 10px 的中央为通明色。

background: radial-gradient(#00caf5 9px,transparent 10px);
background-size: 30px 30px;

第三步：圆环

同样还是应用镜像突变，与画小球的原理雷同，圆心能够做是上一步的小球，在里面多了圆环，这里须要让圆环过程有限的反复，须要应用 repeating-radial-gradient。

background: repeating-radial-gradient(#00caf5 0,#00caf5 4px,transparent 5px,transparent 20px,#00caf5 21px,#00caf5 25px,transparent 26px, transparent 50px);
background-size: 90px 90px;

两头的四角星是因为背景的宽高只有 90px，超出局部暗藏，这样每个反复背景的四个角连接时就造成了看到的样子。

第四步：合成

最初把下面的几个背景进行合并，多个 background 和 background-size 的值以 , 分隔，background 与 background-size 的值是一一对应的，若 background 值的数量多于background-size，那么多余的局部会从background-size 的第一个开始轮询对应。

<u> 点 这里 > 看成果 </u>，关注公众号【前端筱园】，回复“CSS 背景”获取本期全副源码；

要害知识点：

  1. 当 background 存在多个值时，后面的值优先级更高，也就是说后面的背景会笼罩前面的背景。

来看个例子：

background: radial-gradient(#00caf5 9px,transparent 50px), pink;
background: linear-gradient(pink, pink), radial-gradient(#00caf5 9px,transparent 10px);

如果第一个值须要是纯色背景的状况下，不能应用色彩间接示意，否则 background 属性设置值有效，我的办法是应用线性突变代替。

我前面也想了一下起因，因为后面的优先级更高，如果第一个值为纯色背景的话，前面的值成果也无奈展示，那么与间接只设置一个纯色值为背景的成果是一样。

background: linear-gradient(pink, pink), radial-gradient(#00caf5 9px,transparent 10px);
/* 等效于 */
background: pink;
  1. 能够通过 background-size 设置每层背景的大小，如果当初有 4 层背景，然而background-size 只设置了两个值，那么第 3 个和第 4 个背景应该是多大？
background:linear-gradient(-30deg, transparent, transparent 45%, rgb(217, 255, 0), transparent 55%, transparent 100%),
    linear-gradient(30deg, transparent, transparent 45%, rgb(255, 115, 0), transparent 55%, transparent 100%),
    radial-gradient(rgb(255, 192, 218),rgb(255, 192, 218) 30%, transparent 20%),
    radial-gradient(#0085C8 , #0085C8 50%,transparent 50%);
    background-size: 50px 50px, 25px 25px;

间接看成果：

能够看出，第三个背景的大小为 50px 50px，第 4 个背景的大小为 25px 25px，能够得出第 n 个背景的大小为 background-size 的第 n%background-size 值的个数 个值。

混合背景

说到混合背景，不得不引出另外一个 css 属性 mix-blend-mode 混合模式。混合模式最常见于 photoshop 中，是 PS 中非常弱小的性能之一。在 CSS 中，咱们能够利用混合模式将多个图层混合失去一个新的成果。

将两个线性突变背景重叠起来，看一下会失去什么：

在咱们意料之中，因为背景是不通明的，后面的背景会笼罩前面的背景。

当初为它加上mix-blend-mode: multiply 属性看看呢：

此时两个背景重叠后会产生一些微妙的成果，前后背景重叠局部的色彩叠加到一起了，残缺代码如下：

 div {
      display: inline-block;
      position: relative;
      width: 240px;
      height: 240px;
      border: 2px solid #666;
      box-shadow: 1px 1px 4px 2px #aaa;
      margin: auto;
      color: #333;
      text-align: center;
      font-size: 16px;
      line-height: 520px;
    }
    div::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background:
        repeating-linear-gradient(#F7A37B,#F7A37B 1em,#FFDEA8 1em,#FFDEA8 2em,#D0E4B0 2em,#D0E4B0 3em,#7CC5D0 3em,#7CC5D0 4em,#00A2E1 4em,#00A2E1 5em,#0085C8 5em,#0085C8 6em);
      animation: move 5s infinite linear;
      mix-blend-mode: multiply;
    }

    div::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background:
        repeating-linear-gradient(#F7A37B,#F7A37B 1em,#FFDEA8 1em,#FFDEA8 2em,#D0E4B0 2em,#D0E4B0 3em,#7CC5D0 3em,#7CC5D0 4em,#00A2E1 4em,#00A2E1 5em,#0085C8 5em,#0085C8 6em);
      background-size: 30px 30px;
    }

当然，你可应用不同的混合模式来做出一些不同的成果：

也能够应用径向突变：

你还能够应用各种组合形式，通过扭转色彩、大小、突变形式、混合模式等能够失去各种各样的背景。

应用 mix-blend-mode 还能够做出一些炫酷的成果，比如说 故障艺术 ，感兴趣的能够看下这篇文章 奇思妙想 CSS 之“故障艺术”

随机背景

先看成果，每次刷新后的背景都是随机生成的 预览 1 预览 2

要实现这样的背景，这就须要借助一个弱小的 CSS 图案 WEB 组件 css-doodle，前面会专门写一篇针对 css-doodle 的解说。

关注公众号【前端筱园】，回复“CSS 背景”获取本期全副源码；

动静背景

下面所有的背景都是动态的，咱们当初要让背景动起来。

这次咱们多创立几个不同类型的突变背景

别离应用不同的混合模式将他们叠加起来

成果看起来是不是很棒，还没完，当初让背景动起来


对每个背景都应用 hue-rotate 滤镜，从而扭转每层背景的色相值，应用混合模式互相叠加后，就能够看到杂乱无序的眩光成果了。

@keyframes move {
    0% {filter: unset;}

    100% {filter: hue-rotate(360deg);
    }
}

当然，咱们同样能够借助 css-doodle 来随机生成眩光,，每次点击后的成果都不一样。在线体验

应用 mask

顾名思义，mask 译为遮罩。在 CSS 中，mask 属性容许使用者通过遮罩或者裁切特定区域的图片的形式来暗藏一个元素的局部或者全副可见区域。

mask提供一种基于像素级别的，能够管制元素透明度的能力，相似于 png24 位或 png32 位中 alpha 通明通道的成果。

当初有这样一个图案：

background: radial-gradient(circle,#00caf5 5px,transparent 0) 0 0;
background-size: 10px 10px;

有这样个遮罩，这里先应用背景代替：

background: linear-gradient(transparent 20%, rgb(29, 26, 26) 30%, transparent);

当初将他们重叠起来，定义这样的规定：遮罩红色局部为不通明，彩色局部为通明，就会失去这样的成果

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-gPnuZNC0-1615253124602)(https://www.dengzhanyong.com/…]

这个遮罩就是 mask，残缺代码如下：

background: radial-gradient(circle,#00caf5 5px,transparent 0) 0 0;
background-size: 10px 10px;
mask: linear-gradient(transparent 20%, #000 30%, transparent);

利用 mask 能够做出一些齐全设想不到的图案，及时你看到源代码也无奈设想它最终出现的样子。

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-txlASYLk-1615253124602)(https://www.dengzhanyong.com/…]

然而很遗憾的是，mask 的兼容性不是很好，目前只有 Firefox 和 Edge 浏览器反对。

同样，借助 css-doodle 能够做出各式各样的万花筒成果：预览

应用 box-shadow

除了应用 background 属性外，咱们还能够应用 暗影 来制作背景。

咱们用 div 来制作一个按钮，首先还是应用 background 来制作背景：

display: inline-block;
background: seagreen;
color: #fff;
padding: 0 10px;
line-height: 2em;
border-radius: 3px;

为了使按钮赋有立体感，当初为它加上暗影和高光：

box-shadow: 2px 2px 3px #555;
background: linear-gradient(#fff, transparent 5px), linear-gradient(to right, #fff, transparent 5px), radial-gradient(seagreen 0%,seagreen 100%);

下面所有的成果都能够应用 box-shadow 来实现：

box-shadow: 2px 2px 3px #555, 2px 2px 3px #fff inset, 100px 100px seagreen inset;

能够看出，这种实现形式简略很多，只须要一行代码，这里奇妙的使用了内暗影来充当背景。

box-shadow: 2px 2px 3px #555, 2px 0px 10px 5px red inset, 100px 100px yellow inset;
box-shadow: 2px 2px 3px #555, -5px -5px 10px 1px #fff inset, 0 0 13px 1px rgb(0, 255, 170) inset, 100px 100px yellow inset;

与 background 属性有一个共同点，当box-shaodow 存在多个值时，后面的值所在图层更高。

总结

通过本文的学习后，咱们认知不再局限于纯色背景或者突变背景，利用 mix-blend-mode、box-shadow、filter、mask能够创作出一些意想之外的成果。

尽管说某些属性目前的兼容性还不是很好，不过随着 CSS3 的日益壮大，通过 background 来替换一些图片资源失去的成果更佳。来动动你的手指尝试下吧。

最初，如果你感觉我的文章对你有所帮忙，那就 一键三连 反对下吧！

欢送关注我的公众号【前端筱园】，不错过我的每一篇推送

来体验下我的小程序吧【小馒居】，每天保持打卡，不仅播种常识，更有奖金等你拿哦

如果文章内容有问题，望斧正，谢谢

正文完
前端
发表至： 前端
2021-03-11
 0
关于前端:LogicFlow自定义业务节点
关于前端:在VUE项目中添加使用SkeyeWebPlayerjs直播点播H5免费播放器
关于前端:vue3源码五watch源码解析
关于前端:使用TypeScript类型注解编写更干净的JS代码