CSS中组合图片中的个体获得

以前根本不去关注美工的问题，但是接触的东西总的去了解

项目中image文件夹里有许多图标合并到放到一张图片中

这是为了在项目中能够更快的加载，同时也更利于美工人员的维护，数量简洁

本人的css很是一般  有时候光是样式就搞的很头大 这里特此记录一下CSS中组合图片中的单个图片获得方式

首先拿一个简单的图片来说 这是两个个体的组合 在项目我用到鼠标经过是下面的图片  离开的时候就显示上面的图片 看起来像是颜色的变化

上代码：

  <div class="prev" style="border:1px solid red"></div>
  <div class="prev1"  style="border:1px solid blue"></div>

 

 .prev {
       
        WIDTH: 30px;//图片的宽度
        DISPLAY: block;//以一个块的方式
        BACKGROUND: url(../images/feature_left.gif) center top;//这里
                                       背景位置 中心 顶部
        FLOAT: left;  //左漂
        HEIGHT: 48px;    //从上截取48像素
        }

这里本人的错误注释方式。 css正确注释为 /**/

 .prev1 {       
        WIDTH: 30px;
        DISPLAY: block;
        BACKGROUND: url(../images/feature_left.gif) center  bottom;/*这里是中心 底部  决定了截取的高度是从下面开始*/

　　　　 FLOAT: left;
        HEIGHT: 48px;       
        }

效果如下：

再来看一个多个错综组合的图片

这里不说明div布局了  只来看个体的取得

<input id="btn_submit" type="submit" value="" class="loginbtn" title="" />

这里定义了一个名为loginbtn的class

<style type="text/css">
        .loginbtn
        {
            width:84px;
            height:25px;/*这里先定义好元素的宽高*/
            background-image:url(../images/indexbg.png);/*图片链接位置*/
            border:0; /*无边框 个人习惯写 border:none;*/
            cursor:pointer;/*这是一种样式，作用是当鼠标移动到该单元格上时，鼠标会由箭头形状改为手的形状，造成链接的样式*/
            background-position:-183px -103px; /*background-position有三种表示方式  上面的例子是第一种 这里是第二种x% y%
                    第一个值是水平位置，第二个值是垂直位置，左上角是 0% 0%。右下角是 100% 100%.相关属性可百度*/
            }
    </style>

 

效果如下：

这里说下xy坐标的取得  可以自己设置js得到开始坐标的xy  也可以去ps中 窗口-信息中查看  也可以去直接设置  这里就不做说明了