CSS切图

最新推荐文章于 2022-12-01 23:59:52 发布

落叶翩翩

最新推荐文章于 2022-12-01 23:59:52 发布

阅读量1.2k

点赞数

分类专栏： web前端文章标签：图片 css

本文链接：https://blog.csdn.net/bolg_hero/article/details/17239531

版权

web前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

CSS 切图（只显示一张大图片的其中一部分）

最重要的是设置backgroud-position和块级元素的width和height

截图如下：

图片素材：

html和css代码如下：

<html>
<head>
	<meta charset="UTF-8">
	<title>CSS 切图</title>
	<!--
	    CSS 切图 
	  最重要的是设置backgroud-position和块级元素的width和height
	-->
	<style type="text/css">
		.clear{
			clear: both;
		}
		div{			
			background-repeat:no-repeat;			
		}
		.bk_total{
			width:300px;
			height: 300px;
			background: url('w_day_l.png');
		}
		.bk_small{
			width:60px;
			height:100px;
			float: left;		
			border: 1px solid #c8c8c8;
		}
		.text{
			width:60px;
			/*必须设置为block，否则span的width无效*/
			display: block;			
			text-align: center;
		}
		.fine_day,.cloud_day{
			background: url('w_day_l.png');
			border: 1px solid #c8c800;
			width:60px;
			height:45px;.
			text-align: center;
		}
		.fine_day{
			background-position: 0 -90px; 
		}
		.cloud_day{
			background-position: -180px -45px; 
		}

	</style>
</head>
<body>	
	<div class="bk_total">		
	整个图
	</div>
	<br>
	<span class="small_line">
		<div class="bk_small">
			<span class="text"><b>晴天</b></span>			
			<div class="fine_day">
				
			</div>
		</div>		
		<div class="bk_small">
			<span class="text"><b>多云</b></span>			
			<div class="cloud_day">
					
			</div>			
		</div>
		<div class="clear"></div>
	</span>
	</body>
</html>

落叶翩翩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS切图

CSS 切图（只显示一张大图片的其中一部分）最重要的是设置backgroud-position和块级元素的width和height截图如下：html和css代码如下： CSS 切图  .clear{ cl
复制链接

扫一扫