CSS背景属性

2021-12-08 12:58:17 作者：互联网

css背景属性用来设置元素的背景元素。常用的背景元素有

background-color(用于设置背景元素的颜色)

background-image(用于插入背景图片)

background-repeat(用于设置元素的背景图片的重复方式)

background-size(用于设置元素的背景图片大小)

background-color的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.color{
			background-color: #000000;/*这里设置的是背景图片的颜色*/
			color: white;/*这里设置的是内容的颜色 即字体的颜色*/
		}
/*使用background-color设置背景颜色的时候 会默认填充完整个元素*/
		</style>
	</head>
	<body>
		<div class="color">
		<ol>
			<li>举个例子</li>
			<li>举个栗子</li>
			<li>举个梨子</li>
			<li>举个李子</li>
		</ol></div>
	</body>
</html>

background-image的用法

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		
		.color{
			background-image: url(img/adv_bg.jpg);/*插入背景图片*/
			color: #000000;
			padding-left: 50px;/*设置左边的内边距 即字体的左边距*/
		}
		</style>
	</head>
	<body>
		<div class="color">
		<ol>
			<li>举个例子</li>
			<li>举个栗子</li>
			<li>举个梨子</li>
			<li>举个李子</li>
		</ol></div>
	</body>
</html>

background-repeat的用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		/*插入背景图片并且使用repeat方法以水平的方式平铺整个元素*/
		.color{
			background-image: url(img/hrepeat.jpg);
			background-repeat: repeat-x;/*repeat方法可以设置背景图片的平铺方式 x为水平 y为垂直 如果没有设置的话 则图片将重复出现 直至填满整个元素的水平和垂直方向*/
			color: #000000;
			padding-left: 280px;
			padding-top: 80px;
		}
		
        /*设置整体元素的宽高度*/
		.color{
			width: 1000px;
			height: 800px;
		}
		</style>
	</head>
	<body>
		<div class="color">
		<ol>
			<li>举个例子</li>
			<li>举个栗子</li>
			<li>举个梨子</li>
			<li>举个李子</li>
		</ol></div>
	</body>
</html>

background-size的用法

使用该方法就要插入背景图片然后使用该方法去设置图片的尺寸

如图所示，在设置完图片的size属性之后，图片就会以设置后的尺寸在元素中进行显示填充

标签：设置,color,背景,元素,举个,背景图片,background,CSS,属性
来源： https://blog.csdn.net/aibai666/article/details/121779416