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

    1 描述 pdb 是 python 自带的一个包,为 python 程序提供了一种交互的源代码调试功能, 主要特性包括设置断点.单步调试.进入函数调试.查看当前代码.查看栈片段.动态改变变量的值等 调 ...

  2. 转 selenium 自动下载文件

    #coding=utf-8from selenium import webdriver #实例化一个火狐配置文件fp = webdriver.FirefoxProfile() #设置各项参数,参数可以 ...

  3. 可重入函数、线程安全、volatile

    一. POSIX 中对可重入和线程安全这两个概念的定义: Reentrant Function:A function whose effect, when called by two or more  ...

  4. c编程：求出4&#215;4矩阵中最大和最小元素值及其所在行下标和列下标，求出两条主对角线元素之和。

    //求出4×4矩阵中最大和最小元素值及其所在行下标和列下标,求出两条主对角线元素之和 #include <stdio.h> int main() { int sum=0; int max, ...

  5. Python 字典 popitem() 方法

    描述 Python 字典 popitem() 方法随机返回并删除字典中的一个键/值对(一般删除末尾对). 如果字典已经为空,却调用了此方法,就报出KeyError异常. 语法 popitem() 方法 ...

  6. linux中init.d文件夹的说明

    一.简单说明 /etc/init.d 是 /etc/rc.d/init.d 的软链接(soft link).可以通过 ll 命令查看. ls -ld /etc/init.d lrwxrwxrwx. r ...

  7. mysql查询-不存在记录时赋对应的数据

    使用mysql数据库,执行查询的时候,有时候就不存在记录,但是正好在不存在记录的时候又需要给赋予相应的查询结果字段,代码实现如下: select IFNULL(('), '1970-01-01 00: ...

  8. Token：服务端身份验证的流行方案【转】

    01- 身份认证 服务端提供资源给客户端,但是某些资源是有条件的.所以服务端要能够识别请求者的身份,然后再判断所请求的资源是否可以给请求者. token是一种身份验证的机制,初始时用户提交账号数据给服 ...

  9. [Jobdu] 题目1391：顺时针打印矩阵

    题目描述: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2 ...

  10. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...