使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。 
假设我有纸张竖直方向的一张图片，竖直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. pythonl学习笔记——爬虫的基本常识

    1 robots协议 Robots协议(也称为爬虫协议.机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可 ...

  2. 使用fork并发处理多个client的请求和对等通信p2p

    一.在前面讲过的回射客户/服务器程序中,服务器只能处理一个客户端的请求,如何同时服务多个客户端呢?在未讲到select/poll/epoll等高级IO之前,比较老土的办法是使用fork来实现.网络服务 ...

  3. java concurrent之ReentrantLock

    在编码的过程中.有时候我们不得不借助锁同步来保证线程安全.synchronizedkeyword在上一篇博客中已经介绍.自从JDK5開始,加入了还有一种锁机制:ReentrantLock. 二者的差别 ...

  4. PSAPI和ToolHelpAPI学习笔记

    标 题: PSAPI学习笔记 作 者:北极星2003 时 间:2005-07-24 18:36 链 接:http://bbs.pediy.com/showthread.php?threadid=154 ...

  5. WebService 闲聊

    在http://www.2cto.com/ 中搜:WebServices学习笔记(一) WebService三要素 SOAP.WSDL(WebServicesDescriptionLanguage). ...

  6. spring mvc get方式乱码

    使用spring get方式,向后台传递参数的时候,出现乱码,网上搜索了好久,最后发现原因是server.xml中默认的配置有问题,修改如下就正确了,图片: 文本信息:     <Connect ...

  7. Windows Azure Mobiles Services实现client的登录注冊

    下文仅仅是简单实现,client以Android端的实现为例: 用户表Account: package com.microsoft.ecodrive.model; public class Accou ...

  8. js中push和join方法使用介绍

    push和join方法想必大家并不陌生吧,在本文将为大家详细介绍下js中的push和join方法的使用.代码: <script type="text/javascript"& ...

  9. [k8s] kubelet单组件启动静态pod

    kubelet单组件启动静态pod 无需k8s其他组件,单独下载kubelet的二进制,可以启动静态pod. 静态pod不受api管理,kubectl get po可以看到,但是kubectl del ...

  10. 【Android】4.2 资源限定符和可视化选项

    分类:C#.Android.VS2015:创建日期:2016-02-06 在设计界面中,所有资源都可以被限定为使用哪个国家或地区的语言.例如,将字符串资源限定为默认使用中文等. 将字符串资源限定为默认 ...