CSS background-color、background-image、background-repeat、background-position、backgroundsize……

以下代码均基于一个div盒子作介绍

目录

目录

1. background-color

2. background-image

3. background-repeat

4. background-position

5. background-size

6.background-clip

7. background-origin

8. background-clip 和 background-origin的结合

9. background-attachment

10. 连写

---

1. background-color

作用：设置背景颜色

        div {
            width: 200px;
            height: 200px;
            /* 1. 直接设置英文 */
            /* background-color: pink; */
            /* 2. 设置十六进制 */
            /* background-color: #fff; */
            /* 3. 设置rgb颜色模式 */
            /* background-color: rgb(0, 0, 0); */
            /* 4. 设置透明度 */
            background-color: rgba(0, 0, 0, .3);
        }

2. background-image

作用：插入背景图片

参数：填写url地址

        div {
            width: 200px;
            height: 200px;
            background-image: url(./1111.jpg);
        }

3. background-repeat

作用：设置背景平铺；平铺的意思，可以理解为，如果盒子很大，背景图片没那么大，设置了平铺，就能够铺满盒子（的某个方向）

        div {
            width: 900px;
            height: 2000px;
            background-image: url(./1111.jpg);
            /* 1. 参数1：repeat 表示 x轴和y轴都铺满 */
            background-repeat: repeat;
            /* 2. repeat-x 表示 x轴铺满 */
            background-repeat: repeat-x;
            /* 3. repeat-y 表示 y轴铺满 */
            background-repeat: repeat-y;
            /* 4. 表示不平铺 */
            background-repeat: no-repeat;
        }

4. background-position

作用：调整背景图片的位置。以盒子的左上角的顶点为0，0的起点

        div {
            width: 900px;
            height: 900px;
            background-image: url(./1111.jpg);
            background-repeat: no-repeat;
            background-position: 10px 10px; 
            // 第一个值是x轴，第二个值是y轴
            // x轴正方向向右，
            // y轴正方向向下
        }

5. background-size

作用：调整背景图片的大小

5.1 px

• 直接给大小 第一个值是宽度 第二个值是高度

      div {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            background-image: url(./2.jpg);
            background-repeat: no-repeat;
            background-size: 500px 500px;
        }

•   如果只给一个值，第一个值是宽度，第二个值会设置为自动调整，根据原比例 调整

         div {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            background-image: url(./2.jpg);
            background-repeat: no-repeat;
            background-size: 500px;
        }

5.2 百分比

• 给百分比 相较于父盒子宽度和高度的百分比

        div {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            background-image: url(./2.jpg);
            background-repeat: no-repeat;
            /* 2. 给百分比 相较于父盒子宽度和高度的百分比 */
            background-size: 100% 100%;
            /* 图片可能会变形 */
        }

5.3 cover

• 效果是图片能够完整显示，但是可能不会铺满盒子

        div {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            background-image: url(./2.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

5.4 contain

• 效果是能够铺满整个盒子，但是图片可能显示不完全

        div {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            background-image: url(./2.jpg);
            background-repeat: no-repeat;
            background-size: contain;
        }

-------------第二次更新

6.background-clip

背景的内容能够在哪里绘制

取值：

content-box

padding-box

border-box

    <div>
        1233333333333333333333
    </div>

        div {
            width: 400px;
            height: 200px;
            padding: 35px;
            background-color: pink;
            border: 5px dotted #000;
            background-clip: padding-box;
        }

如果是值：padding-box：背景内容在边框以内开始绘制

 如果是content-box:背景内容在padding以内开始绘制

 如果是border-box:背景内容在边框开始绘制

7. background-origin

默认值是padding-box

注意：

MDN：当使用 background-attachment 为fixed时，该属性将被忽略不起作用。

        div {
            width: 400px;
            height: 200px;
            padding: 35px;
            border: 5px dotted #000;
            background-repeat: no-repeat;
            background-origin: content-box;
            background-size: 100px;
            background-image: url(./1111.jpg);
        }

背景图片的绘制区域

• border-box: 背景图片从左上角边框开始绘制

•  padding-box:背景图片从左上角边框内部开始绘制

•  content-box:背景图片从padding内部开始绘制

8. background-clip 和 background-origin的结合

这两个属性如果开发中使用了，看了一些文章是建议结合使用的。

原来在思考clip和origin的区别是什么？发现本质就不同。

origin是背景内容从哪里开始绘制

clip是裁剪，我不管你从哪里开始绘制，但是规定比如content-box设置好，只能内容区域有内容，其他都会被裁剪。

比如设置一个div属性如下

        div {
            width: 500px;
            height: 500px;
            border: 10px dotted black;
            padding: 30px;
            background-image: url('../../images/1111.jpg');
            background-size: 50% 50%;
            background-repeat: no-repeat;
            background-origin: border-box;
            background-clip: content-box;
        }

如上图可以看到 尽管origin设置了border-box,但是clip设置了content-box，所以clip还是算老大一些哈！

9. background-attachment

      /* 1. 背景简写 无需记住顺序 随意即可 */
      /* 2. background-attachment: fixed | scroll */
      /* 2.1 fixed 表示整个浏览器都滚动了 元素的背景图也不动 除非元素也滚没了 */
      /* 2.2 scroll 表示元素滚动了，元素的背景图片不变化 但是视口【整个浏览器】变化了 元素就会发生变化 */

    .straight {
      width: 400px;
      height: 400px;
      border: 1px solid pink;
      /* 1. 背景简写 无需记住顺序 随意即可 */
      /* 2. background-attachment: fixed | scroll */
      /* 2.1 fixed 表示整个浏览器都滚动了 元素的背景图也不动 除非元素也滚没了 */
      /* 2.2 scroll 表示元素滚动了，背景图片不变化 但是视口变化了 元素就会发生变化 */
      /* background:  transparent url('./3.jpg')  no-repeat 10px 10px/10% 10% scroll; */
      overflow: scroll;
      background-attachment: fixed;
      /* background-attachment: scroll; */
    }

html结构类似

<div>
   // 里面内容很多撑大盒子
    <p>123</p>
    <p>123</p>
    <p>123</p>
     ……
</div>

外面是body 也把内撑大使得浏览器能够换行

10. 连写

注意:      1. 背景简写 无需记住顺序 按需添加即可 2. 但是 10px 10px/ 10% 10% 这个表示的是background-position / background-size 这两个通过/分隔要有顺序

div {
      width: 400px;
      height: 400px;
      border: 1px solid pink;
      background:  transparent url('./3.jpg')  no-repeat 10px 10px/10% 10% scroll;
}

<div></div>

结尾：

学习id： 201903090124-7

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。