CSS控制显示图片的一部分
假设我有纸张竖直方向的一张图片,竖直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控制图片显示.rar (1.2 KB)
CSS控制显示图片的一部分的更多相关文章
- 纯CSS控制背景图片100%自适应填充布局
https://blog.csdn.net/wd4java/article/details/50537562 解决: html,body{height: 100%;width: 100%;marg ...
- 用android代码显示图片的一部分源码
ShowPoritionPictureActivity代码: [java] <span style="font-size:16px;"> package com.iwi ...
- css “裁剪”图片(显示图片的一部分)
背景:朋友有一个需求,就是列表页显示的图片要做裁剪,不然不按比例缩小图片看起来就变形了.本来想好的解决办法是用PHP来生成缩略图,然而试了好几个开源缩略图类都没有一个满意的,突然想到为什么不直接用CS ...
- css控制背景图片在浏览器中居中,下拉浏览器的时候背景图一直不变
如 http://www.gm.com/ css样式如下 ;;} #con{ position:absolute; ; ; height:100%; width:100%; background-im ...
- CSS控制显示超出部分,用省略号显示
经常使用.可是常忘,我又不是写css的.所以记下来: 先设置一下限制的宽度, display:block; white-space:nowrap; overflow:hidden; text-over ...
- css控制显示超出多少行以后开始出现省略号的写法
display: -webkit-box; display: -moz-box; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsi ...
- CSS控制图片显示区域
优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...
- CSS控制图片大小
转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片: 对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...
- WPF显示图片
1.WPF显示图片内部一部分 <Rectangle Height="> <Rectangle.Fill > <ImageBrush ImageSource=&q ...
随机推荐
- 安装完SqlServer2008,wamp服务器无法启动的问题
"开始"->"程序"->Microsoft SQL Server 2008->配置工具->SQL Server配置管理器->SQL ...
- Linux内核同步 - memory barrier
一.前言 我记得以前上学的时候大家经常说的一个词汇叫做所见即所得,有些编程工具是所见即所得的,给程序员带来极大的方便.对于一个c程序员,我们的编写的代码能所见即所得吗?我们看到的c程序的逻辑是否就是最 ...
- LCA近期公共祖先
LCA近期公共祖先 该分析转之:http://kmplayer.iteye.com/blog/604518 1,并查集+dfs 对整个树进行深度优先遍历.并在遍历的过程中不断地把一些眼下可能查询到的而 ...
- Python2 字典 has_key() 方法
描述 Python2 字典 has_key() 方法用于判断键(key)是否存在于字典(D)中,如果键在字典中返回True,否则返回False. 官方文档推荐用 in 操作符,因为它更短更通俗易懂.h ...
- Js 常用函数【持续更新】
Js Math对象方法介绍:http://www.w3school.com.cn/jsref/jsref_obj_math.asp 1. 算数函数(Math) 1)Js小数取整 常用于:分页算法 js ...
- ps曲线
>>曲线的基本原理. 输入:在坐标的底部横着的是输入,显示的是当前图片上的颜色信息. 输出:竖着的是输出线,使我们调整图片的输出结果. 输入和输出轴上都有一条明暗信息,告诉我们那边是阴影那 ...
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- git使用(一)----git安装
windows安装git msysgit是windows版本的Git 下载地址:https://git-for-windows.github.io/ 安装步骤 linux安装git https://g ...
- LINUX下添加磁盘空间的方法详解
给Linux系统添加磁盘空间在工作会经常遇到. 在添加第二块磁盘一般系统默认为hdb(IDE硬盘)sdb(SCSI 硬盘),以hdb为例. linux-isep:~ # fdisk /dev/hdb ...
- TensorFlow运作方式入门
TensorFlow运作方式入门 代码:tensorflow/g3doc/tutorials/mnist/ 本篇教程的目的,是向大家展示如何利用TensorFlow使用(经典)MNIST数据集训练并评 ...