HTML基础笔记08_背景和CSS-Sprite

本文介绍了HTML中背景样式的使用,包括如何设置背景图片、控制图片重复方式以及定位。此外,还详细讲解了CSS Sprite技术,这是一种通过组合多个小图标到一张大图并利用背景定位来节省页面加载时间的优化策略。

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

背景样式

 

1.背景图片 background-image:url(相对路径)

       如果图片大小大于元素大小,默认显示图片右上角的一小块,

          若元素大小 大于图片大小,图片会默认repeat填满元素。
                 * background-repeat用于设置背景图片的重复方式
                 *     可选值:
                 *         repeat,默认值,背景图片会双方向重复(平铺)
                 *         no-repeat ,背景图片不会重复,有多大就显示多大
                 *         repeat-x, 背景图片沿水平方向重复
                 *         repeat-y,背景图片沿垂直方向重复
                 */

  可以同时为一个元素指定背景颜色和背景图片,
                 *     这样背景颜色将会作为背景图片的底色
                 *     一般情况下设置背景图片时都会同时指定一个背景颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 1024px;
				height: 724px;
				margin: 0 auto;
				/*设置背景样式*/
				background-color: #bfa;
				/*
				 * 使用background-image来设置背景图片
				 * 	- 语法:background-image:url(相对路径);
				 * 
				 * 	- 如果背景图片大于元素,默认会显示图片的左上角
				 * 	- 如果背景图片和元素一样大,则会将背景图片全部显示
				 * 	- 如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素
				 * 
				 * 可以同时为一个元素指定背景颜色和背景图片,
				 * 	这样背景颜色将会作为背景图片的底色
				 * 	一般情况下设置背景图片时都会同时指定一个背景颜色
				 */
				background-image:url(img/1.png);
				
				/*
				 * background-repeat用于设置背景图片的重复方式
				 * 	可选值:
				 * 		repeat,默认值,背景图片会双方向重复(平铺)
				 * 		no-repeat ,背景图片不会重复,有多大就显示多大
				 * 		repeat-x, 背景图片沿水平方向重复
				 * 		repeat-y,背景图片沿垂直方向重复
				 */
				background-repeat: repeat-y;
			}
			
		</style>
		
		<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>-->
	</head>
	<body>
		
		<div class="box1"></div>
		
	</body>
</html>

 

2.背景图片定位    background-position:  x    y  

        调整的是背景图片的定位,用来显示背景图片中指定的内容 ,常设置为负值。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			*{
				margin: 0;
				padding: 0;
			}
			
			.box1{
				height: 500px;
				margin:  0 auto;
				
				/*
				 * 设置一个背景颜色
				 */
				background-color: #bfa;
				/*
				 * 设置一个背景图片
				 */
				background-image: url(img/4.png);
				/*
				 * 设置一个图片不重复
				 */
				background-repeat: no-repeat;
				/*
				 * 背景图片默认是贴着元素的左上角显示
				 * 通过background-position可以调整背景图片在元素中的位置
				 * 可选值:
				 * 		该属性可以使用 top right left bottom center中的两个值
				 * 			来指定一个背景图片的位置
				 * 			top left 左上
				 * 			bottom right 右下
				 * 			如果只给出一个值,则第二个值默认是center
				 * 
				 * 		也可以直接指定两个偏移量,
				 * 			第一个值是水平偏移量
				 * 				- 如果指定的是一个正值,则图片会向右移动指定的像素
				 * 				- 如果指定的是一个负值,则图片会向左移动指定的像素
				 * 			第二个是垂直偏移量	
				 * 				- 如果指定的是一个正值,则图片会向下移动指定的像素
				 * 				- 如果指定的是一个负值,则图片会向上移动指定的像素
				 * 		
				 */
				/*background-position: -80px -40px;*/
				background-attachment: fixed;
			}
			
			body{
				background-image: url(img/3.png);
				background-repeat: no-repeat;
				
				/*
				 * background-attachment用来设置背景图片是否随页面一起滚动
				 * 		可选值:
				 * 			scroll,默认值,背景图片随着窗口滚动
				 * 			fixed,背景图片会固定在某一位置,不随页面滚动
				 * 
				 * 不随窗口滚动的图片,我们一般都是设置给body,而不设置给其他元素
				 */
				background-attachment:fixed ;
			}
			
			
		</style>
	</head>
	<body style="height: 5000px;">
		
		<div class="box1"></div>
		
	</body>
</html>

 

3. 背景属性简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			body{
				height: 5000px;
				/*设置一个背景颜色*/
				/*background-color: #bfa;*/
				/*设置一个背景图片*/
				/*background-image: url(img/3.png);*/
				/*设置背景不重复*/
				/*background-repeat: no-repeat;*/
				/*设置背景图片的位置*/
				/*background-position: center center;*/
				/*设置背景图片不随滚动条滚动*/ 
				/*background-attachment: fixed;*/
				
				background-color: #bfa;
				
				/*
				 * background
				 * 	- 通过该属性可以同时设置所有背景相关的样式
				 * 	- 没有顺序的要求,谁在前睡在后都行
				 * 		也没有数量的要求,不写的样式就使用默认值
				 */
				background: #bfa url(img/3.png) center center no-repeat fixed;
			}
			
		</style>
	</head>
	<body>
	</body>
</html>

 

 CSS-Sprite

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
		/*
		 * 做完功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁,
		 * 	这个闪烁会造成一次不佳的用户体验。
		 * 产生问题的原因:
		 * 	背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求,
		 * 	但是我们外部资源并不是同时加载,浏览器会在资源被使用才去加载资源
		 * 	我们这个练习,一上来浏览器只会加载link.png由于hover和active的状态没有马上触发,
		 * 		所以hover.png和active.png并不是立即加载的
		 * 	当hover被触发时,浏览器才去加载hover.png
		 * 	当active被触发时,浏览器才去加载active.png
		 * 	由于加载图片需要一定的时间,所以在加载和显示过程会有一段时间,背景图片无法显示,导致出现闪烁的情况
		 * 
		 * 	为了解决该问题,可以将三个图片整合为一张图片,这样可以同时将三张图片一起加载,就不会出现闪烁的问题了,
		 * 	然后在通过background-position来切换要显示的图片的位置,这种技术叫做图片整合技术(CSS-Sprite)
		 * 	优点:
		 * 		1 将多个图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多个图片,
		 * 			提高访问效率,提高了用户体验。
		 * 		2 将多个图片整合为一张图片,减小了图片的总大小,提高请求的速度,增加了用户体验
		 * 
		 * 
		 */
			
			.btn:link{
				/*将a转换为块元素*/
				display: block;
				/*设置宽高*/
				width: 93px;
				height: 29px;
				/*设置背景图片*/
				background-image: url(img/btn/btn2.png);
				/*设置背景图片不重复*/
				background-repeat: no-repeat;
				
			}
			
			.btn:hover{
				
				/*
				 * 当是hover状态时,希望图片可以向左移动
				 */
				background-position: -93px 0px;
			}
			
			.btn:active{
				/*
				 * 当是active状态时,希望图片再向左移动
				 */
				background-position: -186px 0px;
				
			}
			
		</style>
	</head>
	<body>
		
		<!-- 创建一个超链接 -->
		<a class="btn" href="#"></a>
		
	</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值