background详解

曾经终败给现在 2023-05-21 13:57 29阅读 0赞

## background-position ##

*  为每一个背景图片设置初始位置。 这个位置是相对于由 `background-origin` 定义的位置图层的。
 *  如果设置一个值, 则该值作用在横坐标上, 纵坐标默认为 `50%`(即 `center`) ;
 *  如果设置两个值, 则第一个值作用于横坐标, 第二个值作用于纵坐标, 取值可以是方位关键字 `left\top\center\right\bottom`, 如 `background-position: left center` ; 也可以是百分比或长度, 百分比和长度可为设置为负值, 如: `background-position: 10% 30px`
 *  另外 `css3` 支持3个值或者4个值, 注意如果设置3个或4个值, 偏移量前必须有关键字, 如: `background-position: right 20px bottom 30px;`

示例代码

<html>
    <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;box-sizing: content-box">
    		background-position:0 0
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:0
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) top no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:top
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) left no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:left
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) center no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:center
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 10px 50% no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:10px 50%
    	</div>
    </div>
    </html>

![20210818160321447.png][]

## background-size ##

*  设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
 *  `cover`: 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 `contain` 值相反， `cover` 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。 该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。
 *  `contain`: 缩放背景图片以完全装入背景区，可能背景区部分空白。 `contain` 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。 该背景图会填充所在的容器。当背景图和容器的大小的不同时， 容器的空白区域（上/下或者左/右）会显示由 `background-color` 设置的背景颜色。
 *  如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为 `auto`。 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。

示例代码

![20210818160359571.png][]

## background-origin ##

*  规定了指定背景图片 `background-image` 属性的原点位置的背景相对区域.
 *  注意：当使用 `background-attachment` 为 `fixed` 时，该属性将被忽略不起作用。
 *  初始值：`padding-box`
    
     *  `border-box`：背景图片的摆放以 `border` 区域为参考
     *  `padding-box`：背景图片的摆放以 `padding` 区域为参考
     *  `content-box`：背景图片的摆放以 `content` 区域为参考

<html>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat padding-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		padding-box
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat content-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		content-box
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat border-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		border-box
    	</div>
    </div>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMzgxNw_size_16_color_FFFFFF_t_70][]

## background-clip ##

*  设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面
 *  如果没有设置背景图片（`background-image`）或背景颜色（`background-color`）， 那么这个属性只有在边框（ `border`）被设置为非固实（soild）、透明或半透明时才能看到视觉效果 （与 `border-style` 或 `border-image` 有关），否则，本属性产生的样式变化会被边框覆盖。
 *  初始值：`padding-box`
    
     *  `border-box`：背景延伸至边框外沿（但是在边框下层）。
     *  `padding-box`：背景延伸至内边距（`padding`）外沿。不会绘制到边框处。
     *  `content-box`：背景被裁剪至内容区（`content box`）外沿。

<html>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat padding-box padding-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		background-clip:padding-box
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat padding-box content-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		background-clip:content-box
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat padding-box border-box;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px;
    	border: 30px solid mediumvioletred;padding: 10px;box-sizing: content-box">
    		background-clip:border-box
    	</div>
    </div>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMzgxNw_size_16_color_FFFFFF_t_70 1][]

## background-attachment ##

*  `scroll`:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
    
     *  对于 `scroll`，一般情况背景随内容滚动，但是有一种情况例外。 对于可以滚动的元素（设置为 `overflow:scroll` 的元素）。 当 `background-attachment` 设置为 `scroll` 时，背景图不会随元素内容的滚动而滚动。
 *  `fixed`：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了 `body` 上。
 *  `local`：背景图相对于元素内容固定。

<html>
    <div class="div1" style="padding: 30px;border: 10px solid red;color: #ff0000;margin-top:10px;
    background: #fff url(https://miofly.gitee.io/res/img/test/small.png) no-repeat fixed 0 0;;float: left">
    </div>
    <div class="div1" style="padding: 30px;border: 10px solid red;color: #ff0000;margin-top:10px;
    background: #fff url(https://miofly.gitee.io/res/img/test/small.png) no-repeat scroll 0 0;float: left">
    </div>
    <div class="div1"  style="padding: 30px;border: 10px solid red;color: #ff0000;margin-top:10px;
    background: #fff url(https://miofly.gitee.io/res/img/test/small.png) no-repeat local 0 0;float: left">
    </div>
    <script>
    	const div1 = document.getElementsByClassName('div1')
    	for (let i = 0; i < 20; i++) {
    		div1[0].innerHTML = div1[0].innerHTML + '测试代码<br>'
    		div1[1].innerHTML = div1[1].innerHTML + '测试代码<br>'
    		div1[2].innerHTML = div1[2].innerHTML + '测试代码<br>'
    	}
    </script>
    </html>

## background-repeat ##

定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>repeat</td> 
   <td>图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.</td> 
  </tr> 
  <tr> 
   <td>space</td> 
   <td>图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.</td> 
  </tr> 
  <tr> 
   <td>round</td> 
   <td>随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.</td> 
  </tr> 
  <tr> 
   <td>no-repeat</td> 
   <td>图像不会被重复</td> 
  </tr> 
 </tbody> 
</table>

<html>
    <div style="display: flex;justify-content: space-around;background: lightcyan;flex-wrap: wrap ">
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 no-repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-repeat:no-repeat
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 repeat;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:repeat
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 repeat-x;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:repeat-x
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 repeat-y;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:repeat-y
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 space;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:space
    	</div>
    	<div style="background: black url(https://miofly.gitee.io/res/img/test/small.png) 0 0 round;
    	height: 100px;width: 100px;margin-right: 10px;color: #ff0000;margin-top:10px">
    		background-position:round
    	</div>
    </div>
    </html>

![20210818160633277.png][]

## 注意点 ##

*  `background-position` 和 `background-size` 属性, 之间需使用/分隔, 且 `position` 值在前, `size` 值在后。
 *  如果同时使用 `background-origin` 和 `background-clip` 属性, `origin` 属性值需在 `clip` 属性值之前, 如果 `origin` 与 `clip` 属性值相同, 则可只设置一个值。
 *  `background-image`: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;

## 多个图片设置 ##

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    </head>
    <body>
    <style>
    	.bg-test{
    		background-image: url("https://miofly.gitee.io/res/img/glnz/0.jpg"), url("https://miofly.gitee.io/res/img/glnz/1.jpg");
    		background-position: left, right;
    		background-size: contain, 150px 50px;
    		background-repeat: no-repeat, no-repeat;
    		background-color: red;
    	}
    </style>
    <div class="bg-test">
    	这是一段文字，有两个背景图片
    </div>
    </body>
    </html>

![20210818160733720.png][]

[20210818160321447.png]: /images/20230521/515da4c4bd5543a591254264f9e3c2ef.png
[20210818160359571.png]: /images/20230521/16c1ec93d4c04fa28af5fe3dcabedf8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMzgxNw_size_16_color_FFFFFF_t_70]: /images/20230521/5df4cc97a9354f578634938d21aa4e2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMzgxNw_size_16_color_FFFFFF_t_70 1]: /images/20230521/1c7efe1c9d5d4c4fbfd7facc397c292b.png
[20210818160633277.png]: /images/20230521/bb766480aeb54721b89e6d8265c5b5c3.png
[20210818160733720.png]: /images/20230521/3c36c5173fc7412b82e323d630d80947.png