使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。 
假设我有纸张竖直方向的一张图片，竖直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. Python学习笔记014——迭代工具函数 内置函数zip()

    1 描述 zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的列表. 如果各个迭代器的元素个数不一致,则返回列表长度与最短的对象相同,利用 * 号操 ...

  2. WinForm窗体键盘事件，支持方向键和回车键

    /// <summary> /// 快捷键操作 /// </summary> protected override bool ProcessCmdKey(ref Message ...

  3. c++中带返回值函数没写return能通过编译但运行时会出现奇怪问题

    c++中带返回值函数没写return能通过编译但运行时会出现奇怪问题 例如: string myFunc(){ theLogics(); } 发现调用: myFunc(); 崩溃. 但调用: cout ...

  4. cocos2dx 3.x designResolutionSize须主动设置

    cocos2dx 3.x最初设置screenSize和designResolutionSize的地方如下: bool AppDelegate::applicationDidFinishLaunchin ...

  5. HTML5游戏实战之精灵翻转

    要实现精灵的翻转.很easy.先看实际效果点这里. 代码仅仅有区区几行: var sp = this.getWindow().find("ui-status2-general"); ...

  6. CSS实现超级链接需要通过双击后跳转

    超级链接需要双击后跳转如何实现. CSS代码.test3 span { position: relative;}.test3 span a { position: relative;z-index: ...

  7. IServerChannelSinkProvider

    (一) Remoting框架图 这是msdn上关于Remoting客户端与服务器端进行通信的示意图.客户端与服务端的通信是通过发送消息来实现的.消息的处理是由客户端,服务端创建的一系列的通信信道来处理 ...

  8. 对Android的恶意吐槽(勿看，有毒)

    CSDN博客:http://blog.csdn.net/niu_gao 我觉得android系统中有一个特恶心人的大败笔.就是这个大败笔造成了android系统的卡卡卡不停. 这个大败笔就是对acti ...

  9. QT学习记录(1)-控件 QPushButton, QLineEdit, QLabel, QHBoxLayout, QGridLayout

    1.一个简单的QT程序(QPushButton) /* 应用程序抽象类 */ #include <QApplication> /*窗口类*/ #include <QWidget> ...

  10. C#解压或压缩文件夹

    这里主要解决文件夹包含文件夹的解压缩问题.1)下载SharpZipLib.dll,在http://www.icsharpcode.net/OpenSource /SharpZipLib/Downloa ...