您的位置：首页 > Web前端 > CSS

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

2013-03-29 10:50 155 查看
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/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 合成图片 图片偏移
相关文章推荐
新的分享
章节导航