web——CSS精灵图（背景图、定位背景图片background-position属性）

最新推荐文章于 2024-05-16 17:48:19 发布

阿轩同学

最新推荐文章于 2024-05-16 17:48:19 发布

阅读量1.3k

点赞数 2

分类专栏： web 文章标签： html css js web

本文链接：https://blog.csdn.net/weixin_44652589/article/details/115769431

版权

CSS 精灵图 background-position 背景图片移动 HTML实例

关键词由CSDN通过智能技术生成

web 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

web——CSS精灵图（背景图、定位背景图片background-position 属性）

一、background-position属性
二、实例

一、background-position属性

例如下图，若我们只需显示其中一部分
我们可以设置一个div，并设置如下两个属性

background-image: url(opera.jpg);  //背景图片
background-position: -498px -0px;  //背景相对移动的距离

注意：background-position: -498px -0px; 在这种情况下我们div的位置不改变，背景图片相对div运动，露出相应的部分。
第一个值代表左右移动，负数代表左移；
第二个值代表上下移动，负数代表上移。
具体值设置为多少，可以在windows自带的“画图”工具，使用选择工具进行测量。
在这里插入图片描述

二、实例

例如网页实现如下图的效果
在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0 auto;
			}
			#main{
				width: 600px;
				height: 300px;
				background-color: gray;
			}
			#face1,#face2{
				width: 300px;
				height: 300px;
				
				float: left;
			}
			#aaa{
				width: 210px;
				height: 260px;
				background: white;
				background-image: url(opera.jpg);
				background-position: -498px -0px;
				border-radius: 100px;   //圆角矩形的弧度
				margin-top:5px;
				/*float: left;*/
				margin-left:10px ;
			}
			#bbb{
				width: 210px;
				height: 260px;
				background: white;
				background-image: url(opera.jpg);
				background-position: -289px -522px;
				border-radius: 100px;
				background-size: 1050px 785px;
				margin-top:5px;
				margin-right: 10px;
				/*float: right;*/
			}
			#face1 p{
				width: 200px;
				text-align: center;
				margin-top:9px;
				margin-left:15px;
			}
			#face2 p{
				width: 200px;
				text-align: center;
				margin-top:9px;
				margin-right:15px;
			}
			
		</style>
	</head>
	<body>
		<div id="main">
			<section id="face1">
				<div id="aaa">
					
				</div>
				<p>马谡:失街亭</p>
			</section>
			
			<section id="face2">
				<div id="bbb">
					
				</div>
				<p>张郃:长坂坡</p>
			</section>
		
		</div>
	</body>
</html>

阿轩同学

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
web——CSS精灵图（背景图、定位背景图片background-position属性）

web——CSS精灵图（背景图、定位背景图片background-position 属性）一、background-position属性二、实例一、background-position属性例如下图，若我们只需显示其中一部分我们可以设置一个div，并设置如下两个属性background-image: url(opera.jpg); //背景图片background-position: -498px -0px; //背景相对移动的距离注意：background-position: -498p
复制链接

扫一扫