CSS Background完全指南 #Archives009Title/ CSS Background完全指南 #Ar

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

Title/ CSS Background完全指南 #Archives009

序: 为了日更, 这篇文章讲的会比较完整和基础, 进阶开发者可以只关心你需要的内容, 不必顺序阅读.(逻辑混乱ing)

简介: 一篇最简洁高效的CSS背景指南, 我是忘我思考, 共同进步!

Tag/ Background介绍

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

上代码:

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 */ 
        url(RUok.svg) 
        top center / 200px 200px 
        repeat 
        fixed 
        padding-box 
        content-box 
        red; /* 属性之间用空格分隔, 不同背景层之间用逗号分隔 */
}

上面代码定义了两个背景层, 接下来介绍各个属性详细的使用方法.

Tag/ Background相关属性

background

可取值:
```
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;
/* 属性之间可以交换位置 */
```
这个属性是background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size 和 background-attachment 属性的 CSS简写属性,

->> 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…

->> Version History

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

2021.8.19 在掘金发布V0.1