使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。 
假设我有纸张竖直方向的一张图片，竖直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. php 文件上传,下载

    文件下载: html: <html> <body> <a href="1.rar">下载1.rar</a> <br /> ...

  2. Linux调度器 - 用户空间接口

    一.前言 Linux调度器神秘而充满诱惑,每个Linux工程师都想深入其内部一探究竟.不过中国有一句古话叫做“相由心生”,一个模块精巧的内部逻辑(也就是所谓的“心”)其外延就是简洁而优雅的接口(我称之 ...

  3. Python rindex() 方法

    描述 Python rindex() 方法返回子字符串最后一次出现在字符串中的索引位置,该方法与rfind() 方法一样,只不过如果子字符串不在字符串中会报一个异常. 语法 rindex() 方法语法 ...

  4. mysql-cluster 环境安装&配置

    一.mysql-cluster 的介绍: 1.说心里话mysql-cluster这货性能上是不行的,之前一个同事测试了来的结果是8个主机组成的mysql-cluster性能 上搞不过一个单机的mysq ...

  5. mysql-5.7 show engine innodb status 详解

    一.show engine innodb status 简介: show engine innodb status 是mysql提供的一个用于查看innodb引擎时间信息的工具,就目前来说有两处比较 ...

  6. Redis(二十一)：Redis性能问题排查解决手册（转）

    性能相关的数据指标 通过Redis-cli命令行界面访问到Redis服务器,然后使用info命令获取所有与Redis服务相关的信息.通过这些信息来分析文章后面提到的一些性能指标. info命令输出的数 ...

  7. Correlation and Regression

    Correlation and Regression Sample Covariance The covariance between two random variables is a statis ...

  8. verilog中的default应该赋什么样的值

    Q:在状态机的case语句中,最后要加上默认项default,可是我看到有的书上写的是一个确定的状态,有的则是不定态xxx,到底应该写那个啊?求助! A1:取决于case条件是否完备啦如果你的case ...

  9. POJ 2553 The Bottom of Graph 强连通图题解

    Description We will use the following (standard) definitions from graph theory. Let V be a nonempty ...

  10. How to Acquire or Improve Debugging Skills

    http://blogs.msdn.com/b/debuggingtoolbox/archive/2007/06/08/recommended-books-how-to-acquire-or-impr ...