碎碎念:知识点梳理归纳,如果有什么不对的感谢大家指正一起学习!
1. background-clip
- 确定背景的裁剪区域
- 控制元素背景的显示区域
语法:
background-clip : border-box || padding-box || content-box
值 | 说明 |
---|---|
border-box | 默认值。背景绘制在边框内, 超出边框的区域将会被裁剪掉 |
padding-box | 背景绘制在padding边距内,超出padding区域的将会被裁剪掉 |
context-box | 背景绘制在内容方框内,超出内容的区域将会被裁剪掉 |
1.1 border-box (默认值)
- 背景延伸在边框外沿,边框之下
例1: 背景色裁剪
.box {
width: 300px;
height: 300px;
padding: 15px;
margin: 0 auto;
background: pink;
background-repeat: no-repeat;
border: 20px dashed rgba(2255, 0, 0, 0.8);
background-clip: border-box;
}
例2: 背景图裁剪
解析:
一样的代码,把背景色换成背景图可以看到还是有区别的。
- background-color 的填充是从边框的的左上角到右下角
- background-image 的填充是从边框内部开始的,(此时border有20个像素)也就是padding的左上角顶点开始的。
例3: 背景色和背景图图片混合使用
1.2 padding-box
- 边框之下没有背景,背景延伸到内边距外沿
例1: 背景色和背景图图片混合使用,配合padding-box就能让背景色和背景图在同一个位置
.box {
width: 300px;
height: 300px;
padding: 15px;
margin: 0 auto;
background: pink url(香瓜.jpg);
background-repeat: no-repeat;
border: 20px dashed rgba(2255, 0, 0, 0.8);
background-clip: padding-box;
background-size: 100% 100%;
}
例2: 为了方便看效果,我们把背景图的大小调整一下,可以看到背景色的起点位置改变了
background-size: 80% 80%;
对比图:
1.3 context-box
- 背景裁剪到内容区外沿
例: 只保留内容区域的背景,除去边框和间距
.box {
width: 300px;
height: 300px;
padding: 15px;
margin: 0 auto;
background: pink url(香瓜.jpg);
background-repeat: no-repeat;
border: 20px dashed rgba(2255, 0, 0, 0.8);
background-clip: content-box;
background-size: 100% 100%;
}
1.4 三种情况对比
1.5 background-clip:text
- 文本填充背景图片
- 配合其私有属性-webkit-text-fill-color: transparent
例: 透过背景的文字
.box {
background: pink url(香瓜.jpg);
background-repeat: no-repeat;
height: 300px;
padding: 15px;
margin: 25px auto;
font-size: 68px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
padding-top: 77px;
font-weight: bold;
}
2 . background-origin
- 指定背景图片background-image 属性的原点位置的背景定位区域
- 配合background-position属性使用,设置图像的位置
- 注意:当使用 background-attachment 为fixed时,该属性将被忽略不起作用
语法: background-origin:border-box || padding-box || content-box
值 | 说明 |
---|---|
border-box | 背景图片的摆放以border区域为参考,边框 |
padding-box | 背景图片的摆放以padding区域为参考 ,内边距。默认值 |
content-box | 背景图片的摆放以content区域为参考,内容区域 |
2.1 border-box
- 背景图片的摆放以border区域为参考
.box {
background: pink url(香瓜.jpg);
background-repeat: no-repeat;
width: 500px;
height: 300px;
padding: 15px;
margin: 25px auto;
border: 10px dashed red;
background-origin: border-box;
}
2.2 padding-box(默认值)
- 背景图片的摆放以padding区域为参考
.box {
background: pink url(香瓜.jpg);
background-repeat: no-repeat;
width: 500px;
height: 300px;
padding: 15px;
margin: 25px auto;
border: 10px dashed red;
}
2.3 content-box
2.4 三种情况对比
3. background-clip 与 background-origin
background-origin | background-clip |
---|---|
针对与背景图 | 针对于场景 |
只能控制背景图 | 可同时控制背景图和背景色显示范围 |
相关说明:
此文在编辑过程中找了很多资料,但没有保存链接,有问题请留言,谢谢!