CSS背景属性_css 背景色#000设置40%-优快云博客

本文链接：https://blog.youkuaiyun.com/aibai666/article/details/121779416

本文介绍了CSS中的四个关键背景属性：background-color用于设置元素颜色，background-image插入背景图片，background-repeat控制图片重复，background-size设置图片尺寸。实例演示了如何应用这些属性来美化网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>