使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。 
假设我有纸张竖直方向的一张图片，竖直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. 在rhel6上安装Python 2.7和Python 3.3

    安装前,操作系统软件包准备编译python要安装development tools.此外,还要安装一些其他的libs,没有这些libs,python的interpreter可能会无法正常工作 # yu ...

  2. Workflow_上传和下载Workflow编译方式（汇总）

    2014-12-27 Created By BaoXinjian

  3. [Jobdu] 题目1499：项目安排

    题目描述: 小明每天都在开源社区上做项目,假设每天他都有很多项目可以选,其中每个项目都有一个开始时间和截止时间,假设做完每个项目后,拿到报酬都是不同的.由于小明马上就要硕士毕业了,面临着买房.买车.给 ...

  4. RhinoMock异常ExpectationViolationException以及解决

    ExpectationViolationException 异常的原因是没有按照mock的顺序调用方法. mock b mock a //expectation call a call b call ...

  5. ViewPager滑动不畅及灵敏度的问题

    在项目中用到了Android的ViewPager组件,可是发如今滑动的时候不是特别流畅,有些小的滑动无法响应,于是考虑进行优化. 一開始考虑改动ViewPager中的一些參数.比方mTouchSlop ...

  6. asp.net web网站权限系统的简单设计

    权限设计总结一句话就是:拥有权限的主体来管控系统的各种资源资源,及在资源上体现的各种操作. 概括来说就是,权限离不开三要素: 1:权限的主体 2:管控的资源 3:各种操作 现对三要素分别做简单的阐述 ...

  7. iOS-本地的推送

    // //  ViewController.m //  05-本地的推送 // //  Created by hongqiangli on 2017/6/12. // #import "Vi ...

  8. 【快速查阅】Linux下启动和关闭Weblogic（管理服务器+被管服务器）

    Weblogic的管理服务器和被管服务器的启动.关闭,偶尔会用到,却又不常用,导致需用时却忘记了,而又重新查阅HELP. 故,以此记录,方便查阅.执行. 首先,weblogic的启动脚本和关闭脚本都在 ...

  9. MySQL的使用笔记

    @Reference Manual (以下简称REF-M) 在官网,选择MySQL Server,选择Documentation,就可以下载了,建议下载PDF 注意版本要对应 很重要,需要的时候就go ...

  10. anki插件推荐

    记忆是一件需要反复重复的事情,可是怎么花最小的代价来重复呢? 著名的艾宾浩斯遗忘曲线是一个统计学的概念,非常具有参考价值,但是对于不同的人来说,是有差别的,另外操作起来也比较麻烦. 好在现在有许多记忆 ...