利用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 ...
随机推荐
- SQL Server数据库定时自动备份
SQL Server 数据库定时自动备份[转] 在SQL Server中出于数据安全的考虑,所以需要定期的备份数据库.而备份数据库一般又是在凌晨时间基本没有数据库操作的时候进行,所以我们不可能要求 ...
- SQLServer日期函数用法
--1.显示本月第一天 ,) ),)) --2.显示本月最后一天 ,),,))) ,,,)) --3.上个月的最后一天 ,,)) --4.本月的第一个星期一 , ) --5.本年的第一天 ,) --6 ...
- Linux vmstat使用
Vmstat命令的简单使用 Vmstat命令是Linux/unix常用的系统监控工具,可以方便的查看CPU.内存.swap分区.IO读写等情况. Vmstat常用的参数主要有两个:1.采集的时间间隔 ...
- 08-linux 其他知识
linux其他知识点 1-防火墙- iptables原理 2- 本部分属于一步一步学习大数据系列之 Linux 的章节,欢迎订阅更多文章 更多内容请参考:一步一步学习大数据系列介绍
- 修改git remote url
$ ssh -v wangz@gitlab.alibaxx-inc.com $ git remote ali set-url git@gitlab.alibaxx-inc.com:youk-aaa/x ...
- 3D 素材路径
https://3dwarehouse.sketchup.com/user.html?id=1058361951245355501624136&nav=likedcollections
- cxf WebService设置wsdl中soapAction的值
用cxf开发一个WebService很简单,只需要下面几步: 1.定义接口 public interface HelloService { String hello(); } 2.实现 public ...
- sqlserver添加主键
sqlServer中给表添加主键的sql: alter table market_media_medical_history alter column pk_id bigint not null; a ...
- LeetCode 162 Find Peak Element
Problem: A peak element is an element that is greater than its neighbors. Given an input array where ...
- POJ 2823 Sliding Window 线段树区间求和问题
题目链接 线段树区间求和问题,维护一个最大值一个最小值即可,线段树要用C++交才能过. 注意这道题不是求三个数的最大值最小值,是求k个的. 本题数据量较大,不能用N建树,用n建树. 还有一种做法是单调 ...