使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。 
假设我有纸张竖直方向的一张图片，竖直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. 【C语言天天练（十三）】printf、fprintf、sprintf和snprintf函数

    #include <stdio.h> int printf(const char *format, ...); int fprintf(FILE *stream, const char * ...

  2. VC获得window操作系统版本号, 获取操作系统位数

    原文链接: http://www.greensoftcode.net/techntxt/2014315195331643021849 #include <Windows.h>include ...

  3. Python rstrip() 方法

    描述 Python rstrip() 方法用于删除字符串尾部指定的字符,默认字符为所有空字符,包括空格.换行(\n).制表符(\t)等. 语法 rstrip() 方法语法: S.rstrip([cha ...

  4. CView类的使用

    首先我们来写一个样例: 1.建一个win32简单应用程序,不要觉得这样就不能写出MFC程序,由于是不是MFC程序取决于调没调MFC函数. 2. 删除入口函数.仅仅留下#include "st ...

  5. [转]四种π型RC滤波电路

    1．典型π型RC滤波电路    图7-27所示是典型的兀型RC滤波电路.电路中的Cl.C2是两只滤波电容,Rl是滤波电阻,Cl.Rl和C2构成一节π型RC滤波电路.由于这种滤波电路的形式如同字母π且采 ...

  6. python标准库介绍——3 stat 模块详解

    == stat 模块 == [Example 1-50 #eg-1-50] 展示了 ``stat`` 模块的基本用法, 这个模块包含了一些 ``os.stat`` 函数中可用的常量和测试函数. === ...

  7. mysql 更新数据表的记录

    对于表里的记录值,可以通过update 命令进行更改,语法如下: UPDATE tablename SET field1=value1,field2.=value2,……fieldn=valuen [ ...

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

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

  9. Google大牛分享的面试秘籍

    我憋了很长时间想写点关于去Google面试的秘籍.不过我总是推迟,因为写出来的东西会让你抓狂.很可能是这样.如果按统计规律来定义“你”的话,这文章很可能让你不爽. 为啥呢?因为啊……好吧,对此我写首小 ...

  10. How to kill a process on a port on linux 怎么杀死 关掉一个端口

    sudo kill `sudo lsof -t -i:9001`