css 实现图片偏移（含图片合成url）

最新推荐文章于 2022-10-24 10:24:16 发布

曹振华

最新推荐文章于 2022-10-24 10:24:16 发布

阅读量4.3k

点赞数

分类专栏： css 文章标签： css 合成图片图片偏移

本文链接：https://blog.csdn.net/chadcao/article/details/8735443

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1）css图片偏移代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication11.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.sprite-1{ background: url(Images/test.png) no-repeat; background-position: 0 0; width: 32px; height: 32px; }
.sprite-2{ background: url(Images/test.png) no-repeat; background-position: 0 -82px; width: 32px; height: 32px; }
.sprite-3{ background: url(Images/test.png) no-repeat; background-position: 0 -164px; width: 32px; height: 32px; }
.sprite-4{ background: url(Images/test.png) no-repeat; background-position: 0 -246px; width: 32px; height: 32px; }
.sprite-5{ background: url(Images/test.png) no-repeat; background-position: 0 -328px; width: 32px; height: 32px; }
.sprite-6{ background: url(Images/test.png) no-repeat; background-position: 0 -410px; width: 32px; height: 32px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div">
<ul>
<li class="sprite-1"></li>
<li class="sprite-2"></li>
<li class="sprite-3"></li>
<li class="sprite-4"></li>
<li class="sprite-5"></li>
<li class="sprite-6"></li>
</ul>
</div>
</form>
</body>
</html>

2）合成图片如下

3）推荐合成图片网址

http://cn.spritegen.website-performance.org/

曹振华

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 实现图片偏移（含图片合成url）

1）css图片偏移代码如下 .sprite-1{ background: url(Images/test.png) no-repeat; background-position: 0 0; width: 32px; height: 32px; } .sprite-2{ background: url(Images
复制链接

扫一扫

专栏目录