CSS3学习第1篇——background-clip、background-origin详解_简述css3 中 background-clip background-origin 的含义。它们都

作者：菜鸟追梦旅行 | 2024-05-18 22:51:23

踩

简述css3 中 background-clip background-origin 的含义。它们都有哪些属性值? 信

css3中新增的background属性学习

属性	描述	CSS
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

1、background-origin

属性规定 background-position 属性相对于什么位置来定位。

background-origin: padding-box|border-box|content-box;

padding-box 背景图像相对于内边距框来定位。默认
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。

2、background-clip

background-clip 属性规定背景的绘制区域。
background-clip: border-box|padding-box|content-box;

border-box 背景被裁剪到边框盒。默认
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

3、background-size

background-size 属性规定背景图像的尺寸。默认值auto
background-size: length|percentage|cover|contain;

4、综合示例


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3 background</title>
	<style type="text/css">
		div{
			width: 25%;
			height: 200px;
			float: left;
			border:20px dashed #A8A7A4;
			background-color: green;
			background: url(../images/4.jpg) no-repeat;
			padding: 20px;
			color: red;
			margin: 10px;
		}
 
		p{
			text-align: center;
			vertical-align: middle;
			color: red;
			font-size: 30px;
		}
 
		#d1{
			background-origin: border-box;
		} 
 
		#d2{
			background-origin: padding-box;
		} 
 
		#d3{
			background-origin: content-box;
		}
 
		#c1{
			background-origin: border-box;
			background-clip: border-box;
		} 
 
		#c2{
			background-clip: padding-box;
		} 
 
		#c3{
			background-clip: content-box;
		}
	</style>
</head>
<body>
	<div id="d1">
		我是测试文本，文字内容区域，不用太在意我，重点看图片的位置变化
		<p>background-origin: border-box;</p>
	</div>
 
	<div id="d2">
		我是测试文本，我是测试文本，不用太在意我，重点看图片的位置变化
		<p>background-origin: padding-box;</p>
	</div>
 
	<div id="d3">
		我是测试文本，我是测试文本，不用太在意我，重点看图片的位置变化
		<p>background-origin: content-box;</p>
	</div>
 
	<div id="c1">
		我是测试文本，我是测试文本，不用太在意我，重点看图片的位置变化
		<p>background-clip: border-box;</p>
	</div>
	
	<div id="c2">
		我是测试文本，我是测试文本，不用太在意我，重点看图片的位置变化
		<p>background-clip: padding-box;</p>
	</div>
	<div id="c3">
		我是测试文本，我是测试文本，不用太在意我，重点看图片的位置变化
		<p>background-clip: content-box;</p>
	</div>
</body>
</html>

效果：

5、小结

background-origin设置图片的定位，即图片左上角的位置(从哪开始显示)
background-clip设置图片显示哪部分区域，可以实现背景图片的裁剪(显示哪)，例如可以设置图片从边框左上角进行定位，但是针对内容区域进行裁剪
background-size: contain;背景图像可以完整显示，但可能不能完全覆盖背景区域
background-size: cover;背景图像可以完整覆盖背景区域，但是图像可能显示不完整

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/590253