CSS学习Day9之背景属性

2024-03-12 13:24:26

背景属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景属性</title>
	<style type="text/css">
		.bg{
			width: 500px;
			height: 500px;
			border: 3px solid green;
			background-color: red;
			background-image: url(../images/小米logo.png);/*背景图片*/
			/*平铺方式*/
			background-repeat: no-repeat;/*防止左右平铺*/
			/*background-repeat: repeat-x;横向平铺
			background-repeat: repeat-y;纵向平铺*/
			/*背景定位*/
			background-position: 50px 100px;/*分别表示横向和纵向*/
			/*background-position-x: 100px;横向
			background-position-y: 100px;纵向*/
		}
	</style>
</head>
<body>
	<div class="bg"></div>
</body>
</html>

背景定位详解

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景定位</title>
	<style type="text/css">
		.bg{
			width: 500px;
			height: 500px;
			border: 3px solid green;
			background-color: red;
			background-image: url(../images/小米logo.png);
			background-repeat: no-repeat;/*防止左右平铺*/
			/*数值：
			background-position: 50px 100px;分别表示横向和纵向
			background-position-x: 100px;横向
			background-position-y: 100px;纵向*/
			/*关键词：
			background-position: top center;上中
			background-position: top left;上左
			background-position: top right;上右
			background-position: center center;
			background-position: center left;
			background-position: center right;
			background-position: bottom center;
			background-position: bottom left;
			background-position: bottom right;*/
			/*百分比：
			计算：百分比的值 = 容器宽（长）度的百分比 - 背景图片宽（长）度的百分比
			background-position: 50% 50%;中间
			background-position: 50% 100%;中下*/
		}
	</style>
</head>
<body>
	<div class="bg"></div>
</body>
</html>

MIUI背景图

.bgi{
	width: 100%;
	height: 657px;
	background: url(../images/MIUI6.png) no-repeat center top;/*综合属性*/
	/*background-image: url(../images/MIUI6.png);
	background-repeat: no-repeat;
	background-position: center top;*/
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小米背景定位案例</title>
	<link rel="stylesheet" type="text/css" href="../css/13.MIUI背景图.css">
</head>
<body>
	<div class="bgi"></div>
</body>
</html>

CSS Sprite雪碧图技术

它是一种图像拼接技术。可将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分
使用场景：
- 静态图片：不随用户信息变化而变化
- 小图片，图片比较小（2~3KB）
- 加载量比较大时，一些大图不建议使用雪碧图
优点：
- 有效的减少了HTTP请求数量
- 加速内容显示
- 原理：通过CSS背景属性的background-position来控制雪碧图的显示

技术实现：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS Sprite雪碧图</title>
	<style type="text/css">
		div{
			width: 35px;
			height: 35px;
			display: inline-block;
			/*24*595*/
			background: url(../images/淘宝雪碧图.png) no-repeat 0 0;
			background-size: 24px 597px;/*快速的让背景图缩放比例,分别为宽高*/
		}
		.sprite1{
			background-position: 0 0;
		}
		.sprite2{
			background-position: 0 -44px;
		}
		.sprite3{
			background-position: 0 -87px;
		}
		.sprite4{
			background-position: 0 -132px;
		}
	</style>
</head>
<body>
	<div class="sprite1"></div>
	<div class="sprite2"></div>
	<div class="sprite3"></div>
	<div class="sprite4"></div>
</body>
</html>

淘宝列表导航案例：

.taobao_list{
	float: left;
	border-top: 1px solid #f4f4f4;
}
.taobao_list ul{
	width: 293px;
	overflow: hidden;
	list-style: none;/*清除前面的点*/
	margin: 0;
	padding: 0;
}
.taobao_list ul li{
	float: left;
	width: 71px;
	height: 75px;
	border: 1px solid #f4f4f4;
	border-top-color: transparent;
	border-left-color: transparent; 
}
.taobao_list ul li a{
	text-decoration: none;
	text-align: center;
	display: block;
	font-size: 12px;
	color: #888;
}
.taobao_list ul li a span{
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(../images/淘宝雪碧图.png) no-repeat 0 0;
	background-size: 24px 597px;
	margin-top: 12px;
}
.taobao_list ul li a span.span1{
	background-position: 0 0;
}
.taobao_list ul li a span.span2{
	background-position: 0 -88px;
}
.taobao_list ul li a span.span3{
	background-position: 0 -44px;
}
.taobao_list ul li a span.span4{
	background-position: 0 -132px;
}
.taobao_list ul li a span.span5{
	background-position: 0 -176px;
}
.taobao_list ul li a span.span6{
	background-position: 0 -220px;
}
.taobao_list ul li a span.span7{
	background-position: 0 -266px;
}
.taobao_list ul li a span.span8{
	background-position: 0 -310px;
}
.taobao_list ul li a span.span9{
	background-position: 0 -354px;
}
.taobao_list ul li a span.span10{
	background-position: 0 -398px;
}
.taobao_list ul li a span.span11{
	background-position: 0 -442px;
}
.taobao_list ul li a span.span12{
	background-position: 0 -486px;
}
.taobao_list ul li a p{
	margin: 0;
	padding: 0;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>淘宝列表导航</title>
	<link rel="stylesheet" type="text/css" href="../css/14.淘宝列表导航案例.css">
</head>
<body>
	<div class="taobao_list">
		<ul>
			<li>
				<a href="#">
					<span class="span1"></span><!--背景图-->
					<p>充话费</p>
				</a>
			</li>	
			<li>
				<a href="#">
					<span class="span2"></span><!--背景图-->
					<p>旅行</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span3"></span><!--背景图-->
					<p>车险</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span4"></span><!--背景图-->
					<p>游戏</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span5"></span><!--背景图-->
					<p>彩票</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span6"></span><!--背景图-->
					<p>电影</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span7"></span><!--背景图-->
					<p>酒店</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span8"></span><!--背景图-->
					<p>理财</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span9"></span><!--背景图-->
					<p>找服务</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span10"></span><!--背景图-->
					<p>演出</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span11"></span><!--背景图-->
					<p>水电煤</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span12"></span><!--背景图-->
					<p>火车票</p>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>

码农公寓

背景属性

背景定位详解

MIUI背景图

CSS Sprite雪碧图技术

相关文章