CSS从大图片上截取小图标的操作
注:图片名称(tabicons.png)每个小图标width:18px;height:18px从左上角坐标为(-0px;-0px;);
例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为(-20px;-0px;)中间依次加20个像素
截取小图标样式
.icon
{
background: url(imges/tabicons.png) no-repeat;
width: 18px;
line-height: 18px;
display: inline-block;
}
.icon-set
{
background-position: -380px -200px;
} .icon-add
{
background-position: -20px 0px;
}
样式调用示例
<form id="form1" runat="server">
<div class="icon icon-add">
</div>
</form>
CSS从大图片上截取小图标的操作的更多相关文章
- CSS从大图片上截取小图标的操作(转)
一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...
- CSS从大图片上截取小图标的操作以及三角形的画法
#name{ background:url(images/name.png) no-repeat 2px 2px; background-position: -2px -70px;//其中这个是定位图 ...
- CSS从大图片上截取小图标
一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...
- <转载>使用css让大图片不超过网页宽度
让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度! 接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问 ...
- wangEditor大图片上传问题
wangEditor上传大图片时候会 上传超时.后端没有问题,我百度很多,又去群里问,都得不到答案.最后问同事,有个属性 editor.config.uploadTimeout = 10000000 ...
- 大图片上传(ImageIO,注意有的图片不能上传时因为他是tiff格式)
一下是必要的: 1.enctype="multipart/form-data" 2. //不要使用myeclipse自动生成的get.set方法(struts2中的用法) publ ...
- css:自己实现一个带小图标的input输入框
有小图标的input输入框<input type="text" placeholder="输入手机号" style="background:ur ...
- css实现在图片上显示文字
一. 准备工作 1. 点击此下载 相关的文件 二. 浏览器中运行 play-img.html 文件,即可显示效果 三. 效果图
- java给图片写正反字体,并将二维码写到图片上,代码实现
/** * @param filePath * 源图片路径 * @param markContent * 图片中添加内容 * @param outPath * 输出图片路径 字体颜色等在函数内部实现的 ...
随机推荐
- 电脑无法登陆ftp
电脑无法登陆ftp,或者对于少数ftp能登陆,大多数不能登陆,用了一大堆ftp软件一样登陆不了.后来baidu了一下,发现是防火墙的问题.据说是Windows防火墙阻止了20/21端口的通信,说白了就 ...
- 数据结构《16》----自动补齐实现《一》----Trie 树
1. 简述 Trie 树是一种高效的字符串查找的数据结构.可用于搜索引擎中词频统计,自动补齐等. 在一个Trie 树中插入.查找某个单词的时间复杂度是 O(len), len是单词的长度. 如果采用平 ...
- RabbitMQ/JAVA 客户端连接测试
这里是一个简单的helloworld测试. 这里在eclipse平台中实现 细节不再赘述.重点是导入rabbitmq-java-client的jar包 下载地址:http://www.rabbitmq ...
- Magento文件系统目录结构
magento │ .htaccess│ cron.php //系统cron程序,修改 linux的cron运行,加入magento的一些定时处理│ cron.sh│ favicon.ico ...
- windows 下mysql每日定时备份的几种方法
第一种:新建批处理文件 backup.dat,里面输入以下代码: 代码如下 复制代码 net stop mysql xcopy "C:/Program Files/MySQL/MySQL ...
- bootstrap-4
html文档中,列表结构主要有三种:有序列表.无序列表和定义列表:<ul><li>.<ol><li>.<dl><dt><d ...
- UILabel 的高度根据文字内容调整
1.UILabel 对文字的自适应有两种方法. 1)将label的numberOfLines设为0;并添加自适应方法[titleLabel sizeToFit],但是这种方法并不理想. 2)根据文字的 ...
- 导航position:absolute
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- ATMEL处理器自带USB CDC的Win7驱动问题
[背景] 很久以前使用ATMEL的处理器开发了一款设备,通过处理器本身的功能,借助USB在PC端虚拟一个串口出来,实现和上位机软件的通信,和基本的参数设置和数据读取功能. 这个功能就是ATMEL官网上 ...
- liunx之:top命令解释
top命令经常用来监控linux的系统状况,比如cpu.内存的使用,程序员基本都知道这个命令,但比较奇怪的是能用好它的人却很少,例如top监控视图中内存数值的含义就有不少的曲解. 本文通过一个运行中的 ...