CSS 设置背景图片

文章目录

- 设置背景颜色
- 设置背景图片
- - 背景图片偏移量计算原点
  - 背景图片尺寸
  - 设置背景图片位置
  - 设置背景图片重复方式
  - 设置背景范围
  - 设置背景图片是否跟随元素移动
  - 测试背景图片

本文概念部分参考：CSS背景background设置

设置背景颜色

background-color 设置背景颜色

设置背景图片

background-image 设置背景图片（背景图片将会盖在背景颜色上方）
- 如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满（图片重复的超出元素的部分将会被裁剪掉）
- 如果背景图片大小大于元素，则背景图片一部分会无法完全显示（图片多余的超出元素部分将会被裁剪掉）
- 如果背景图片大小等于元素，则背景图片会直接正常显示
- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色

背景图片偏移量计算原点

background-origin 背景图片的偏移量计算的原点
- border-box 背景图片的变量从边框处开始计算
- padding-box 默认值，background-position从内边距处开始计算
- content-box 背景图片的偏移量从内容区处计算

注意：经过测试，它是第一张图片的左上角到元素左上角的距离（第一张的意思是：在图片repeat铺满之前）。如果是border-box，那就是第一张图片的左上角到元素边框靠外面的哪那个左上角的距离。如果是padding-box，那就是到padding靠外面那个左上角的距离。如果是content-box，那就是到content左上角的距离。

背景图片尺寸

background-size 用来调整背景图像的尺寸大小。
- 第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是auto(即表示第二个值等比例缩放)
- cover 图片的比例不变，将元素铺满
- contain 图片比例不变，将图片在元素中完整显示
补充：

background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及
background-origin（图片的起始位置）的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。

如：background-size : contain | cover | 100px 100px | 50% 100%;

background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小； background-size ：50%
100%; // 调整图片到指定大小，百分比相对于"包含元素"的尺寸。

设置背景图片位置

background-position 设置背景图片的位置
- 通过top-center-bottom，left-center-right这几个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
- 通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量
background-position百分比原理
- 等价写法

top left, left top 等价于 0% 0%.
top, top center, center top 等价于 50% 0%.
right top, top right 等价于 100% 0%.
left, left center, center left 等价于 0% 50%.
center, center center 等价于 50% 50%.
right, right center, center right 等价于 100% 50%.
bottom left, left bottom 等价于 0% 100%.
bottom, bottom center, center bottom 等价于 50% 100%.
bottom right, right bottom 等价于 100% 100%.

background-position百分比计算公式

background-postion:x y;
x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

如上通过设置百分比和关键字能实现背景图居中，如果要实现通过具体值来设置图片居中该设置多少？

根据上面公式：

x=(容器的宽度-背景图宽度)*x百分比=(300px-200px)*50%=50px;
y=(容器的高度-背景图高度)*y百分比=（300px-200px）*50%=50px;

即设置background-postion:50px 50px;

效果同样居中。

设置背景图片重复方式

background-repeat 设置背景图片的重复方式
- repeat 默认值，背景图片沿着 x 轴和 y 轴双方向重复
- repeat-x 背景图片沿着 x 轴方向重复
- repeat-y 背景图片沿着 y 轴方向重复
- no-repeat 背景图片不重复

设置背景范围

background-clip 设置背景的范围（同时控制背景颜色和背景图片的裁剪）
- border-box 默认值，背景会出现在边框的下边
- padding-box 背景不会出现在边框，只出现在内容区和内边距
- content-box 背景只会出现在内容区

设置背景图片是否跟随元素移动

background-attachment 背景图片是否跟随元素移动
- scroll 默认值，背景图片会跟随元素移动
- fixed 背景会固定在页面中，不会随元素移动

测试背景图片

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>设置背景图</title>
		<style>
			/*
				去掉列表有序或者无序的徽记
			*/
			ul{
				list-style-type: none;
			}
			/*
				设置浮动，改变元素排列顺序
			*/
			li{
				/* 设置从左到右排列 */
				float: left;
				/* 每个列表向右偏移 */
				margin-right: 30px;
				/* 每个列表向下偏移 */
				margin-top:100px;
			}

			/*
				设置背景图
			*/
			body{
				background-image: url("./image/background.gif");
				/*
					设置背景图横向排列，不换行
				*/
				background-repeat: repeat-x;
				background-color:#cccc99;
				/*
					使用红绿蓝三种颜色可以测定颜色
					rgb(0~255,0~255,0~255)

				background-color: rgb(204,204,153);
				*/
			}
			label{
				display: block;
				margin-top: 100px;
			}

			input.myinput{
				border:solid 2px red;
				background-color: #ffd3d6;
				/* 设置波浪线背景图 */
				background-image: url("./image/check.gif");
				/* 只允许从左往右横向排列一次 */
				background-repeat: repeat-x;
				/* 设置背景图的位置 */
				background-position: bottom;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><img src="image/1.jpg" alt="图片错误"></li>
			<li><img src="image/2.jpg" alt="图片错误"></li>
			<li><img src="image/3.jpg" alt="图片错误"></li>
			<li><img src="image/4.jpg" alt="图片错误"></li>
		</ul>

		<label for="myinput">
			用户姓名: <input type="text" name="test" class="myinput"
			             placeholder="请输入用户名" id="myinput"/>
		</label>
	</body>
</html>