今天遇到一个新鲜的问题,如果定位一个设计师设计的图片。例子如下:

实现只显示每一个图标,主要是将图片等分,然后通过background-position来控制,注意等分的时候要减一,第一个百分比表示x轴,第二个表示y轴:

background-position:0% 100%;

显示如下:

background-position:100% 33.3333%;

显示如下:

background-position:0% 100%;

利用css中的background-position定位图片的更多相关文章

  1. css中的大小、定位、轮廓相关属性

    css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...

  2. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  3. 浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  4. (转)浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  5. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  6. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  7. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. css中设置background属性

    属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: backgrou ...

随机推荐

  1. CP

    cp:copy files and directories,如果要拷贝目录,则使用-a或者-r参数,则能够拷贝目录, 如果源文件是多个,那目标文件在最后,且是目录. Cp [-aifpru] [源文件 ...

  2. STM32f103 定时器之编码器接口模式

    背景 买了个Arduino的旋转编码器模块,配合STM32定时器的编码器模式实现了旋转角度以及圈数的计数.这种旋转编码器我能想到的实际应用场景暂时只有实体音量旋钮,鼠标的滚轮等,所以只实现了计数.阅读 ...

  3. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  4. 变量声明---let,const,解构

    let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题. const是对let的一个增强,它能阻止对一个变量再次赋值. 块作用域 当用let声明一个变量,它使用的是 ...

  5. Objective-C中的浅拷贝和深拷贝(转载)

    本文转自:http://segmentfault.com/blog/channe/1190000000604331 浅拷贝 浅拷贝就是对内存地址的复制,让目标对象指针和源对象指向同一片内存空间.如: ...

  6. 【Network】Neutron-Docker-K8S

    Neutron-Docker-K8S openstack/neutron: Neutron is a virtual network service for Openstack. Neutron和SD ...

  7. spring framework核心框架体系结构

    很实用,稀里糊涂的我算是看清了. 很多人都在用spring开发java项目,但是配置maven依赖的时候并不能明确要配置哪些spring的jar,经常是胡乱添加一堆,编译或运行报错就继续配置jar依赖 ...

  8. WinForm BaseClass类常用通用方法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  9. Matlab 周期方波信号傅里叶级数展开

    方波信号为: 傅里叶级数展开为: 程序运行结果: 程序代码: clear x = -6:0.01:6; T = 4; f = x; for N = 1:length(f) temp = rem(abs ...

  10. Ruby混合类型

    当一个类拥有可以从多个父类继承的特点,类应该显示多重继承. Ruby没有直接支持多继承,但Ruby模块有另一个精彩使用.他们几乎消除多重继承的需要,提供了一个工厂,称为混入. 混合类型给一个精彩的控制 ...