利用css中的background-position定位图片
今天遇到一个新鲜的问题，如果定位一个设计师设计的图片。例子如下：
实现只显示每一个图标，主要是将图片等分，然后通过background-position来控制，注意等分的时候要减一，第一个百分比表示x轴，第二个表示y轴：
background-position:0% 100%;
显示如下：
background-position:100% 33.3333%;
显示如下：
background-position:0% 100%;
利用css中的background-position定位图片的更多相关文章
- css中的大小、定位、轮廓相关属性
css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- css中设置background属性
属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: backgrou ...
随机推荐
- 读取图像，LUT以及计算耗时
使用LUT(lookup table)检索表的方法,提高color reduce时对像素读取的速度. 实现对Mat对象中数据的读取,并计算color reduce的速度. 方法一:使用Mat的ptr( ...
- linux vi(vim)常用命令汇总
1 查找 /xxx(?xxx) 表示在整篇文档中搜索匹配xxx的字符串, / 表示向下查找, ? 表示向上查找其中xxx可以是正规表达式,关于正规式就不多说了. 一般来说是区分大小写的, 要想不区分大 ...
- 如何做出透明背景的flash动画
最近碰到了一个问题,做动画时怎么设置透明背景,字是白色的,网上搜了一下,发现可以这样做 在插入的flash代码中加入这一行代码就可以实现了 <param name="wmode&quo ...
- Sublime text 3如何编辑less并转(编译)成css文件
今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个 ...
- Okhttp3的简单使用
1.get请求: /** * *okhttp get请求 * */ public class MainActivity extends AppCompatActivity { private stat ...
- 高性能MySQL（三）：服务器性能剖析
select * from c LEFT JOIN c100w on c.id=c100w.id; -- 联合查询 show PROFILES; -- 查看查询耗时 select * from c; ...
- Http原理理解及内容整理
更多资料及交流请加群:
- WPF之命名空间和资源
1.参考: https://msdn.microsoft.com/zh-cn/library/ms747086(v=vs.110).aspx http://www.cnblogs.com/cww201 ...
- Firefox Portable Developer 52.0.0.6176-6178
FirefoxPortableDeveloper-52.0.0.6176.7z 47.9 MB FirefoxPortableDeveloper-52.0.0.6178.7z 55.8 MB
- java 深入技术七（类的结构和反射）
1.java反射(reflect) java 类的结构 java反射机制就是把java类按结构分解,每一部分对应特定的反射类 java反射机制允许运行时加载,探知和使用在编译期间完全未知的classe ...