[8K字] CSS Background&Gradient完全指南(V0.1) #Archives009Coding C

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

Title/ CSS Background&Gradient完全指南 #Archives009

序:
关于 background 属性, 了解点CSS的人总会知道个大概.
但是... 你能手写CSS的3个渐变函数和2个控制函数吗? CSS背景的9个属性, 你全都知道吗? 你知道bg-repeat中space和round的作用吗?
是不是不完全明白呢? 没关系, 跟我来! (好吧, 你全都会, 那大佬轻喷啊qwq...
为了日更, 这篇文章讲的会比较完整和基础, 进阶开发者可以只关心你需要的内容, 不必顺序阅读. 我是忘我思考, 终身学习!

简介:
标题是CSS bg完全指南, 的确不骗你, 就是**完全指南, 包含每一个bg的使用方法, 阅读这一篇文章就可以完全**掌握CSS bg的使用方法. (什么! 你说你读过就忘? 那就没办法了啊qwq...)

注:
background 属性在本文中会缩写为bg, 不过在CSS中当然不能这样简写(doge).

Tag/ Background介绍

CSS 属性 background 可以为网页上的元素制作出来各种丰富多彩的背景.
不仅可以搞4种渐变色, 还可以在一个元素叠加多个背景, 相当的鬼(he)畜(he).

上代码:

element {
    background:
        url(mi_logo.svg)    /* image */
        top center / 20px 20px /* position / size */
        no-repeat /* repeat */
        fixed /* attachment */
        padding-box /* origin */
        content-box /* clip */
        orange /* color */
}

上面就是 background 属性的大致使用方法了. background 属性也可以进行叠加:

ele {
   background: cornflowerblue, url("ruok.svg");
}

属性之间用空格分开, 不同背景层之间用逗号分开.

Tag/ Background相关属性

background

这个属性是background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size 和 background-attachment 属性的 CSS简写属性, 接下来介绍每个属性的用法.

可取值:
```
background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment, (another-bg);
/* 部分属性之间可以交换位置, 要注意 bg-position/bg-size 中间的 / 不能省略. */
```
background-color

指定了背景颜色, 值为 <color>, 默认值是 transparent.
background-image

指定了一张背景图片, 可以是 url(...)(图片的资源地址, 作为背景图片插入网页), 可以是 <color>(可以理解为一张纯色图片), 也可以使用 CSS渐变函数(一张渐变色的图片).

而CSS渐变使用是真的很复杂, 为了方便阅读这里只作引用, 使用方法和函数会在本文的 ->> Details 中完整的展开介绍.

background-position

指定背景图片的位置, 默认值为 center, 这个位置是相对于 background-origin 而言的.

可取值:

/*单位可以是 <length>, <percentage> 或者关键字, 可取负值表示相反方向偏移*/
/*关键字: top, bottom, left, right, center. */

background-position: 50px; /*一个值: 指定x坐标的值, 另一个值为center(默认值)*/
background-position: top; /*一个值(关键字): 指定该关键字表示的值, 另一个值为center.*/
background-position: 100px 75%; /*两个值: 分别是x坐标和y坐标的值*/
background-position: bottom 25% right; /*三个值(关键字 值 关键字): 指定距离边际的距离(比如本例是距离底部25%长, 与右边贴合.)*/
background-position: top right 50px; /*三个值(关键字 关键字 值): 指定距离边际的距离(本例是距离右边50px, 贴合顶部.)*/
background-position: bottom 25% left 50px; /*四个值(关键字 值 关键字 值): 指定距离边际的距离(本例是距离底部25%长, 距离左边50px).*/

background-size

指定背景图片的大小, 默认值为 auto.

可取值:

/*单位可以是 <length>, <percentage> 或者关键字*/
/*关键字: contain(按比例缩放, 以较短边为图片大小填满背景区域), cover(按比例缩放, 以较长边为图片大小填满背景区域), auto(按比例缩放, 默认为原始大小)*/

background-size: 50px; /* 一个值: 指定图片的宽度, 图片的高度为auto(默认值), 即按比例缩放大小*/
background-size: auto 5em; /* 两个值: 分别指定图片的宽高*/

background-repeat

指定背景图片的重复排列方法, 默认值为repeat.

/*一个值: 同时指定x轴和y轴的重复排列方法.*/
background-repeat: repeat; /*按需重复背景图片来覆盖整个背景区域. 在大小不够的情况下, 边缘的图片会被裁剪.*/
background-repeat: space; /*重复背景图片来覆盖整个背景区域, 但是不会裁剪图片. 边缘图像会被固定边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.*/
background-repeat: round; /*重复背景图片并按比例缩放以填充空间, 不会有空隙.*/
background-repeat: no-repeat; /*不重复背景图像.*/

/*两个值: 分别指定x轴和y轴的重复排列方法.*/
background-repeat: space round; /*分别指定X轴和Y轴的重复方式为 space 和 round.*/

/*简写方法*/
background-repeat: repeat-x; /*作用与 repeat no-repeat 相同*/
background-repeat: repeat-y; /*作用与 no-repeat repeat 相同*/

background-origin

指定背景图片的起始点位置, 默认值为 padding-box.
特殊地, 当 background-attachment 属性值为 fixed 时, 该属性将被忽略不起作用.

可取值:
```
background-origin: border-box; /*背景图片左上角坐标位于 border-box 位置*/
background-origin: padding-box; /*背景图片左上角坐标位于 padding-box 位置*/
background-origin: content-box; /*背景图片左上角坐标位于 content-box 位置*/
```
See Also:
一个LiveDemo tympanus.net/codrops/css…

bg-origin和bg-clip区别(截图) www.cnblogs.com/shytong/p/5…

background-clip

指定背景(图片和颜色)延伸到哪个盒子, 默认值为 border-box.

可取值:

background-clip: border-box; /*背景延伸到 border-box*/
background-clip: padding-box; /*背景延伸到 padding-box*/
background-clip: content-box; /*背景延伸到 content-box*/
background-clip: text; /*(Experimental) 背景填充文本*/

background-attachment

指定背景图像的位置在元素内的滚动方式(固定还是随着元素滚动), 默认值为 scroll.

可取值:

background-attachment: fixed; /*表示背景相对于视口固定. 即使一个元素拥有滚动机制, 背景也不会随着元素的内容滚动.*/
background-attachment: local; /*表示背景相对于元素的内容固定. 如果一个元素拥有滚动机制, 背景将会随着元素的内容滚动, 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框.*/
background-attachment: scroll; /*表示背景相对于元素本身固定, 而不是随着它的内容滚动(对元素边框是有效的)*/

->> Details

`background-image` - `CSS渐变`函数

序:
关于CSS渐变虽然大家都或多或少了解一些, 但是其实这个内容非常复杂, 大多数人都只是停留在表面(比如会写最基本的渐变方法)而已.

但是你比别的普通前端厉害的地方就在不就体现于你是否知道别人不懂的东西吗. 而这个CSS渐变在UI设计中也是很常用的, 设计师很可能为了折磨前端, 做一些神奇又复杂的渐变.

比如你在实战中要还原设计稿, Adobe Illustrator里的渐变也可一点也不简单(图片来自Adobe官网).

比如上图中, Adobe就采用了"任意渐变"的Gradient Type.

这个任意渐变的设计稿, 要你来实现, 大概会说: 这个渐变都不是在一条线的(到处都有黑色和白色的色标), 用一般的渐变根本没法实现啊...

所以解决方法可能是用AI导出含渐变色的png(AI默认导出svg时就是这样实现的), 然后用bg-image(或者bg-clip: text)来添加到前端.

不是这种方法不好, 只要能实现效果, 任何方法都是OK的.

而是我觉得知难而退, 不肯钻研的的学习态度不是很好. 所以我就来和大家一起探究啦!

看到这里你肯定已经猜到了, 纯CSS是可以实现"任意渐变"的!!!(惊) ->> 看下面!
/*注: CSS可以实现多数"任意渐变", 不过特殊地, 如果添加一些"高级设定"就可能无法实现了*/
background: radial-gradient(ellipse at right, #f18a89, transparent),
            radial-gradient(ellipse at bottom, #e16259, transparent), 
            radial-gradient(ellipse at left, #abdcef, transparent), 
            linear-gradient(#fffefc, transparent);
好, 那它会有什么效果呢?

是不是有内味了? (颜色取自 notion.so 登录页的UI)

可是现在网上的关于CSS渐变的**完整**资料非常少, 连MDN目前都有中文支持性问题(见下图, 翻译了一半就全是英文了), 所以我读英文官方文档看了半天才搞懂啊qwq...

而且菜鸟教程(runoob.com) 和W3School文档, 目前都只说有两个函数(最常用的线性渐变和径向渐变), 只介绍了最基础的使用方法, 而这在实战很多情况是不够的.

所以我决定把我的理解以最通俗易懂的方式放在这里, 分享给大家一篇(可能也是唯一一篇)简洁, 完整的中文文档.

好, 这个序到此为止, 准备好了没? 重头戏开始了!

CSS目前支持3种渐变函数, 2种重复渐变函数.

linear-gradient()(线性渐变)

语法:

/*关于颜色的名称, 这里参考了 https://zh.wikipedia.org/wiki/颜色列表*/

background: linear-gradient(angle, stop1, stop2); /*angle是可选的, 如果不填则默认是从上到下. stop即为色标*/
background: linear-gradient(#e66465, #9198e5); /*从上到下过渡荔枝红到鼠尾草蓝*/
background: linear-gradient(90deg, green, yellow) /*angle设为90度, 表示从左到右*/
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c); /*0.25turn关键字, 表示从左到右. turn前的数字可以是 <percentage>, 表示旋转的大小.*/
background: linear-gradient(#3f87a6, #ebf8e1 10% 50%, #f69d3c 30%); /*颜色后的 <percentage> 表示色标的位置, 如果有两个表示一个区间. 如果色标之间有重叠, 定义在之前的会覆盖之后的.*/

radial-gradient(径向渐变)

todo
conic-gradient(圆锥渐变)
repeating-linear-gradient(重复线性渐变)
repeating-radial-gradient(重复径向渐变)

->> See also

Gradienta - 体验在线编辑CSS背景渐变 gradienta.io/

Codepen - Explaining gradient angles codepen.io/thebabydino…

->> Reference link

MDN中文文档 developer.mozilla.org/zh-CN/docs/…

MDN 英文文档 developer.mozilla.org/en-US/docs/…

菜鸟教程 www.runoob.com/cssref/css3…

Sara Cope css-tricks.com/almanac/pro…

掘金 - CSS Background 属性详解 juejin.cn/post/684490…

MDN - 使用CSS渐变 developer.mozilla.org/zh-CN/docs/…

->> Version History

现在版本为V1.0 详见 Github(@flightmakers)

2021.8.25 晚23点(本来计划是2021.8.19的, 但是最后失败了) 在掘金发布V0.1

[8K字] CSS Background&Gradient完全指南(V0.1) #Archives009

Title/ CSS Background&Gradient完全指南 #Archives009

Tag/ Background介绍

Tag/ Background相关属性

->> Details

background-image - CSS渐变函数

->> See also

->> Reference link

->> Version History

`background-image` - `CSS渐变`函数