CSS3背景样式详解（图像大小，图像位置等）

发布时间：2024年01月10日

背景样式

在CSS3中，新增了3个背景属性

属性说明
background-size背景大小
background-origin背景位置
background-clip背景剪切

background-size属性

概念：在CSS3之前，我们是不能用CSS来控制背景图片大小的，背景图片的大小都是由图片实际大小确定的。

但在CSS3中，可以用background-size属性来定义背景图片的大小。

特点

  • 图片可以保有其原有的尺寸，
  • 图片拉伸到新的尺寸，
  • 图片在保持其原有比例的同时缩放到元素的可用空间的尺寸

语法:：

background-size:属性值；

常用属性值

属性值说明
像素值设置背景图像的宽度和高度。只能为正值。如果设置2个属性值，则第1个属性值定义宽度，第2个属性值定义高度。如果只设置1个属性值，则表示宽度，而高度则等比例缩放
百分比以父元素的百分比来设置背景图像的宽度和高度。只能为正值。如果设置2个属性值，第一个属性值设置宽度，第二个属性值定义高度。如果只设置1个属性值，该属性值表示宽度，而高度则等比例缩放
auto定义背景图像按照原始尺寸表示
cover即“覆盖”，表示把背景图像等比例缩放到完全覆盖背景区域。背景图像的某些部分也许无法在背景定位区域中。和contain相反，cover值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景以它的全部宽或者高覆盖所在容器。当容器和背景图像大小不同时，背景图的左/右或者上/下部分会被裁剪
contain即”容纳“，表示把背景图像等比例缩放到宽度或高度与容器的宽度或高度相等时，以使背景图像位于区域内，但可能使背景区部分空白。contain尽可能的缩放背景并保持图像的宽高比例（图片不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小不同时，容器的空白区域（上/下或者左/右）会显示由background-color设置的背景颜色

注意：没有被背景图片覆盖的背景区域仍然会显示用background-color属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来

单张图片的背景大小可以使用以下方法中的一种来规定：

  • 使用关键字contain
  • 使用关键字cover
  • 设定宽度和高度值

当通过宽度和高度来定义尺寸时，可以提供一或者两个数值:

  • 当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值：
  • 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为 auto。
  • 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。

每个值都可以是像素值 还是百分比,或者auto

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图片的大小</title>
		<style type="text/css">
			div{
				display:inline-block;
				width:200px;
				height:150px;
				border:1px solid green;
				margin:20px;
				background-image:url('../边框样式/image/son.jpg');
				background-repeat:no-repeat;
			}
			.a{
				background-size:200px 150px;
			}
			.b{
				background-size:100% 100%; 
			}
			.c{
				background-size:auto;
			}
			.d{
				background-size:cover;
			}
			.e{
				background-size:contain;
			}
		
		</style>	
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"></div>
		<div class="e"></div>
	</body>
</html>

运行结果
在这里插入图片描述

注意：背景图片跟普通图片（即是img标签）是不同的东西。width跟height这两个属性只能用来定义img标签图片的大小，而不能用于控制背景图片的大小

background-origin属性

概念：默认情况下，background-position属性总是以元素左上角为坐标原点定位背景图像。

在CSS3中，可以使用background-origin属性来定义背景图片是从什么地方开始平铺的，也就是定义背景图片background-image属性的原点位置的背景相对区域

语法：

background-origin:属性值;

说明

属性值

属性值说明
border-box从边框区域（含边框）开始显示背景图像
padding-box默认值，从内边距区域（含内边距）开始显示背景图像
content-box从内容区域（含内容）开始显示背景图像

注意：当使用background-attachment为fixed时，该属性将被忽略不起作用

边框区域，内边距区域和内容区显示如图
在这里插入图片描述

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图片位置</title>
		<style>
			div{
				display:inline-block;
				width:200px;
				height:150px;
				border:10px solid green;
				margin:20px;
				padding:20px;
				background-image:url('../边框样式/image/border.png');
				background-repeat:no-repeat;
				text-align-last: center;
				line-height:150px;
				font-size:20px;
			
			}
			.a{
				background-origin:border-box;
			}
			.b{
				background-origin:padding-box;
			}
			.c{
				background-origin:content-box;
			}
		</style>
	</head>
	<body>
		<div class="a">border-box</div>
		<div class="b">padding-box</div>
		<div class="c">content-box</div>
	</body>
</html>

运行结果
在这里插入图片描述

实际上，background-origin属性的本质是：定义background-position属性相对于什么位置来定位。如果没有设置background-position,因此浏览器会采用默认值，即"background-position:top left"。

background-clip属性

概念：background-clip属性用于定义背景图片的裁剪区域

语法：

background-clip:属性值;

属性值

属性说明
border-box默认值，从边框区域开始向外裁剪背景图像
padding-box从内边距区域开始向外裁剪背景图像
content-box从内容区域开始向外裁剪背景图像
text背景被裁剪成文字的前景色

边框区域，内边距区域和内容区显示如图
在这里插入图片描述

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>裁剪图像</title>
		<style>
			div{
				display:inline-block;
				width:200px;
				height:150px;
				border:10px dotted green;
				margin:20px;
				padding:20px;
				background-image:url('../边框样式/image/son.jpg');
				background-repeat:no-repeat;
				text-align-last: center;
				line-height:150px;
				font-size:20px;
				color:white;
			}
			.a{
				background-clip:border-box;
			}
			.b{ 
				background-clip:padding-box;
			}
			.c{
				background-clip:content-box;
			}
			.d{
				background-clip:text;
				color:rgba(0,255,255,0.6);
			}
		</style>
	</head>
	<body>
		<div class="a">border-box</div>
		<div class="b">padding-box</div>
		<div class="c">content-box</div>
		<div class="d">text</div>
</html>

运行结果
在这里插入图片描述

多重背景图像

概念：

所谓的多重背景图像，指的是该元素的背景图像不止一张

在CSS3之前版本中，一个容器中只能填充一幅背景图像，如果重复设置，后设置的背景图像会覆盖之前的背景图像

但在CSS3的背景图像功能增强了很多，允许在一个容器里显示多幅背景图像，使背景图像效果更容易控制。

CSS3中没有为实现多重背景图像提供对应的属性，而是通过background这个复合属性来实现多重背景图像的效果，各属性值之间用英文逗号（,）隔开。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多重背景图像</title>
		<style>
			div{
				width:1200px;
				height:800px;
				border:1px solid blueviolet;
				background:url("../边框样式/image/fish4.png") left center no-repeat ,url("../边框样式/image/fish.png") top center no-repeat;

			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

运行结果
在这里插入图片描述

除了运用background复合属性，也可以通过background属性的子属下background-image、background-repeat、background-position等属性提供多个属性值来实现多重背景图像的效果

/* background复合属性 */
	background:url("../边框样式/image/fish4.png") left center no-repeat ,url("../边框样式/image/fish.png") top center no-repeat;

/* background子属性，这两者效果是一样的*/
	background-image: url("../边框样式/image/fish4.png"),url("../边框样式/image/fish.png");
	background-repeat:no-repeat;
	background-position:left center,top center;
	background-size:40%;

这两者是等价的，运行效果都一致的。

说明：多重背景图像在实际开发中，不建议使用多张背景图片，因为每多一张图片就会多引发一次HTTP请求，势必影响页面加载速度

文章来源:https://blog.csdn.net/AIMing_byte/article/details/135511744
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章