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

本文详细介绍了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>

​​​​​​​


总结

以上内容简单介绍了背景样式的几个方面,更多内容请关注博主。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值