css背景相关的样式

深碍√TFBOYSˉ_ 2022-05-24 09:55 164阅读 0赞

一、`background-origin` 设置元素背景图片的原始起始位置。

语法：`background-origin ： border-box | padding-box | content-box;`  
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

二、`background-clip` 用来将背景图片做适当的裁剪以适应实际需要。

用来将背景图片做适当的裁剪以适应实际需要。  
语法：`background-clip ： border-box | padding-box | content-box | no-clip`  
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。

三、`background-size` 设置背景图片的大小

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。  
语法：`background-size: auto | <长度值> | <百分比> | cover | contain`  
**取值说明：**

*  1、auto：默认值，不改变背景图片的原始高度和宽度；
 *  2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
 *  3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
 *  4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
 *  5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

四、background-attachment属性-控制背景图片不动

语法：background-attachment：属性值；

相关属性值：scroll（默认值，当页滚动条滚动时，背景跟着滚动）、fixed（背景不会懂）；

在浏览器中浏览页面时，当拖动滚动条时背景也会随之移动，而此属性就是固定背景的位置。

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220524/3d6ebef39ba04fef98be863ebe674fae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220524/cc7ceccd87924a36b10171c840898dac.png