使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。 
假设我有纸张竖直方向的一张图片，竖直y轴方向分别是字母：A,B,C.... 
现在分别要显示A、B、C 等字母，我们的CSS可以这么写： 
这里图片一个字母所占的width=20px,height=20px; 
.mar_wordA { 
    background: url("../images/ranking.gif") no-repeat scroll 0 0px transparent; 
}

.mar_wordB { 
    background: url("../images/ranking.gif") no-repeat scroll 0 -20px transparent; 
}

.mar_wordC { 
    background: url("../images/ranking.gif") no-repeat scroll 0 -40px transparent; 
} 
........................ 
若果是水平方向的图片，调整x轴的值即可。 
注：需要容器负载图片。

CSS控制显示图片的一部分的更多相关文章

  1. 纯CSS控制背景图片100%自适应填充布局

    https://blog.csdn.net/wd4java/article/details/50537562 解决:   html,body{height: 100%;width: 100%;marg ...

  2. 用android代码显示图片的一部分源码

    ShowPoritionPictureActivity代码: [java] <span style="font-size:16px;"> package com.iwi ...

  3. css “裁剪”图片（显示图片的一部分）

    背景:朋友有一个需求,就是列表页显示的图片要做裁剪,不然不按比例缩小图片看起来就变形了.本来想好的解决办法是用PHP来生成缩略图,然而试了好几个开源缩略图类都没有一个满意的,突然想到为什么不直接用CS ...

  4. css控制背景图片在浏览器中居中，下拉浏览器的时候背景图一直不变

    如 http://www.gm.com/ css样式如下 ;;} #con{ position:absolute; ; ; height:100%; width:100%; background-im ...

  5. CSS控制显示超出部分，用省略号显示

    经常使用.可是常忘,我又不是写css的.所以记下来: 先设置一下限制的宽度, display:block; white-space:nowrap; overflow:hidden; text-over ...

  6. css控制显示超出多少行以后开始出现省略号的写法

    display: -webkit-box; display: -moz-box; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsi ...

  7. CSS控制图片显示区域

    优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...

  8. CSS控制图片大小

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片:    对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...

  9. WPF显示图片

    1.WPF显示图片内部一部分 <Rectangle Height="> <Rectangle.Fill > <ImageBrush ImageSource=&q ...

随机推荐

  1. PLSQL_统计信息系列06_统计信息的历史和日志

    20150506 Created By BaoXinjian

  2. Unix环境高级编程(十二)线程控制

    本章介绍了一个进程中多个线程之间如何保持数据的似有性及进程的系统调用如何与线程进行交互. 1.线程限制: Single Unix定义了一线线程操作的限制,和其他的限制一样,可以通过sysconf来查询 ...

  3. Linux前台、后台、挂起、退出、查看命令汇总

    command &  直接在后台执行程序 ctrl+c 退出前台的命令,不再运行 ctrl+z挂起前台命令暂停运行,回到shell命令行环境中 bg    将刚挂起的命令放到后台执行 bg % ...

  4. ORM是什么？

    对象关系映射(Object Relational Mapping,简称ORM)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述对象和数据库之间映射的元数据 ...

  5. Visual Studio 中突出显示的引用

    有时候代码中处理的变量多了,看起代码来就比较的费劲,有时想看一个变量都在哪里用到了,还要一个一个的去仔细分辨. 一.VS2012本身就提供了选中提示功能 但是本身带的这个选中提示功能颜色比较浅,不过这 ...

  6. [hihoCoder] #1122 : 二分图二•二分图最大匹配之匈牙利算法

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上一回我们已经将所有有问题的相亲情况表剔除了,那么接下来要做的就是安排相亲了.因为过年时间并不是很长,所以姑姑希望能够尽可 ...

  7. Hypothesis Testing

    Hypothesis Testing What's Hypothesis Testing(假设检验) Hypothesis testing is the statistical assessment ...

  8. 基于乐观锁的配置server与XServer的交互

    XServer与配置server,配置server保存有XServer的配置文件里的信息. 怎样在项目启动时.让XServer从配置server中获取到自己的配置信息,并达到通信资源的节省与控制. 通 ...

  9. Xcode模拟器的一些快捷键

    Cmd+1/2/3       可以切换模拟器的显示比例. Option+Shift     可以在模拟器中调出双指拖动效果. Option      可以在模拟器中调出双指放大缩小效果. Comma ...

  10. MySQL常见的库操作，表操作，数据操作集锦及一些注意事项

    一 库操作(文件夹) 1 数据库命名规则 可以由字母.数字.下划线.@.#.＄ 区分大小写 唯一性 不能使用关键字如 create select 不能单独使用数字 最长128位 2 数据库相关操作 创 ...