html5雪碧图背景

最新推荐文章于 2022-12-01 12:51:29 发布

milijiangjun

最新推荐文章于 2022-12-01 12:51:29 发布

阅读量856

点赞数

分类专栏： # html5

本文链接：https://blog.csdn.net/milijiangjun/article/details/81061243

版权

html5 专栏收录该内容

232 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0px ;padding: 0px;}
		.nav{


   /* position: absolute;*/
    /* z-index: 1002; */
  /*  overflow: visible;
    opacity: 1;*/
  /*  cursor: default;*/
  /*  pointer-events: none;*/
     position: absolute;
			   bottom: 0px;
    background-image: url(img/ui.png);
    
    width: 66px;
    height: 88px;
	/*padding-left: 3px;*/
    background-position: 0px -159px;
	 
		transform:scale(13.549, 1);	 
			/*background: url(img/ui.png)  70px 89px no-repeat ;*/

		}
	</style>
</head>
<body>
	 
		<div class="nav" style="" ></div>
		<!-- <div class="nav" ></div>
		<div class="nav" ></div>
		<div class="nav" ></div> -->
 
</body>
</html>

此背景为由黑色遮罩，图片为雪碧图，经过了获得后进行的底部放大沿着x轴。