4. 背景属性补充

背景属性补充

1. background-origin(原点，起点)设置背景定位的原点

   border-box 以边框做为参考原点；

   padding-box 以内边距做为参考原点；

   content-box 以内容区做为参考点；

2. background-clip设置背景区域 clip(裁切)

   border-box 裁切边框以内为背景区域；

   padding-box 裁切内边距以内为背景区域；

   content-box 裁切内容区做为背景区域

3. 以逗号分隔可以设置多背景

   background: url("img/1.jpg") no-repeat left top, url(img/2.jpg) no-repeat right top;

.box {
            width: 300px;
            height: 300px;
            color: #fff;
            font-size: 30px;
            border: 10px dotted pink;
            padding: 20px;
            background:red url("images/1.jpg") no-repeat;
            background-size: 100%;

            /* 背景的原点 */
            /* background-origin: border-box; */
            /* background-origin: content-box; */
            /* background-origin: padding-box; */

            /* 背景的裁切 */
            /* background-clip: content-box; */
            /* background-clip: padding-box; */
            /* background-clip: border-box;  */

            /* 设置多背景,用逗号隔开 */
            /* background: url("images/1.jpg") no-repeat 0 0,
            url("images/2.jpg") no-repeat right bottom;
            background-size: 100px,200px; */
        }

<div class="box">不凡学院</div>