css背景样式，背景颜色背景图片，列表样式

logical_thinking

已于 2022-08-11 21:37:43 修改

阅读量652

点赞数 2

分类专栏： css基础盒知识文章标签： html5 前端 html 青少年编程 css

于 2022-08-11 21:25:42 首次发布

本文链接：https://blog.youkuaiyun.com/logical_thinking/article/details/126293340

版权

css基础盒知识专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中背景样式的应用，包括背景颜色、背景尺寸、背景移动、背景图片渲染位置，以及列表样式的设定，如列表符号类型和位置。通过实例展示了如何设置这些属性，帮助理解并掌握CSS在页面布局中的运用。

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

前言

本文章：讲述如何用css给背景添加样式、背景尺寸、背景移动、以及背景图片的渲染位置，并且介绍了列表样式。

一、背景样式

背景颜色的设置 background-color:加入颜色;

这里的颜色可以是颜色的英文单词也可以是十六进制、或者rgb 颜色；

                   block：块级
               inline:行内元素
               inline-block:行内块元素
               行级元素：行内元素和行内块元素
               浏览解析行级元素会当成文本处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color:red;
				display: inline-block;
			}
			span{
				width: 200px;
				height: 200px;
				background-color:green;
				/* block：块级 
				   inline:行内元素
				   inline-block:行内块元素
				   行级元素：行内元素和行内块元素
				   浏览解析行级元素会当成文本处理
				   
				*/
				display:inline-block;
				/* margin-left:-10px; */
				margin-left: -8px;
			}
			p img{
				margin-left:-8px;
			}
		</style>

	</head>
	<body>
		<div></div>
		<span></span>
		<p>
			<img src="./img/photo-1.jpg" alt="">
			<img src="./img/photo-1.jpg" alt="">
			<img src="./img/photo-1.jpg" alt="">
		</p>
	</body>
</html>

二、背景尺寸

这里的url是链接的一个照片的路径

                 背景尺寸
                       cover:直接缩放到和父元素一样的宽高
                           auto:默认，原样
                           contain：保持图片宽高比例最大化缩放
                           x,y: 100px 50%(相对父元素的宽高比例)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			div {
				background-color: red;
				margin: 0 auto;
				width: 250px;
				height: 200px;
				/*
					综合设置
						顺序时：1.颜色 2.图片 3.图片的存在方式
				 */
				background: red url("./img/photo-1.jpg") no-repeat ;
				/* 背景尺寸 
						      cover:直接缩放到和父元素一样的宽高
							  auto:默认，原样
							  contain：保持图片宽高比例最大化缩放
							  x,y: 100px   50%(相对父元素的宽高比例)	  				  
						*/
				/* background-size: 200px 200px; */
				background-size: 60% 200px;

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

三、背景移动

               背景图片是否固定
                       local:默认，会随浏览器滚动条滚动
                       fixed:背景固定不动，不跟随滚动条移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 引用背景图片，父元素必须设置高度 */
			.wrapper{
				height: 915px;
				background: pink url("./img/bg.jpg") no-repeat;
				/* 背景图片是否固定 
						   local:默认，会随浏览器滚动条滚动
						   fixed:背景固定不动，不跟随滚动条移动
						*/
				background-attachment: fixed;
				border: 10px solid red;
				color: white;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			
		</div>
		<div>
			
		</div>
	</body>
</html>

四、背景图片的渲染位置

                 背景图片渲染的位置
                       border-box:可以在边框区域、内边距区域、内容区域
                       padding-box：默认，可以在内边距区域和内容区域
                           content-box：只能在内容区域

                 当只写一个位置的时候
                   left：靠左垂直居中
                   right：靠右垂直居中
                   top：靠顶端水平居中
                   bottom：靠底端水平居中
                   center：水平方向和垂直方向上居中
                   当写两个位置的时候
                       例如：left bottom 便是左下角位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			div {
				width: 100px;
				height: 100px;
				border: 20px solid rgb(255, 0, 0, 0.5);
				padding: 100px;
				background: lightgreen url("./img/chui.png") no-repeat;
				/* 背景图片渲染的位置 
						     border-box:可以在边框区域、内边距区域、内容区域
						     padding-box：默认，可以在内边距区域和内容区域
							 content-box：只能在内容区域
						*/
				background-origin: border-box;
				
				/* 当只写一个位置的时候
					left：靠左垂直居中
					right：靠右垂直居中
					top：靠顶端水平居中
					bottom：靠底端水平居中
					center：水平方向和垂直方向上居中
					当写两个位置的时候
						例如：left bottom 便是左下角位置
				 */
				background-position: left bottom;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

五、列表样式

           列表符号类型
                           none:去掉列表符号
                           circle:空心圆
                               square:方形圆点
                               decimal:数字
列表符号位置
                           outside:符号在列表外，默认
                               inside:符号在列表内

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li {
				border: 1px solid red;


				/* 列表符号类型
							    none:去掉列表符号
							    circle:空心圆
								square:方形圆点
								decimal:数字
							 */
				list-style-type: decimal;
				/* 列表符号位置 
							     outside:符号在列表外，默认
								 inside:符号在列表内
							*/
				list-style-position: inside;

				/* 列表符号图片引用 */
				list-style-image: url("./img/arrow-right.gif");

				list-style: url("./img/arrow-right.gif")inside;
				/* list-style: square outside; */
				/* list-style: none; */
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>