利用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 ...
随机推荐
- acm小知识
__builtin_popcount(i); __builtin_popcountll(i) ;//计算i的二进制表示中1的个数 int a[M] , b[M] ; memcpy(a+i , b+j ...
- Android之Linearlayouy线性布局
写了个小例子xml代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...
- CSS属性小结之--半透明处理
项目中经常有遇到需求半透明的情况,如图片.文字.容器.背景等等,每次都要去翻以前的项目,不甚其烦.现在一次性做个小结,方便自己查阅,也同时分享给大家: 一. 元素容器透明 .div{ opacity: ...
- 基于.net搭建热插拔式web框架（实现原理）
第一节:我们为什么需要一个热插拔式的web框架? 模块之间独立开发 假设我们要做一个后台管理系统,其中包括“用户活跃度”.“产品管理”."账单管理"等模块.每个模块中有自己的业务特 ...
- BZOJ 3639: Query on a tree VII
Description 一棵树,支持三种操作,修改点权,修改颜色,问所有与他路径上颜色相同的点的最大权,包含这两个点. Sol LCT. 用LCT来维护重边,对于每个节点在建一个set用来维护轻边,这 ...
- (转载)html中table的使用方法
colspan表示该一储存格向右打通的栏数. rowspan表示该一储存格向下打通的栏数. colspan是表示横向合并单元格,colspan=“3”表示水平合并三个td rowspan是表示竖直 ...
- ajax简单应用
var xmlhttp;if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new ...
- html5——canva 绘图1简单图形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ThinkInside
#sideBar,#blog_post_info_block { display: none;}#under_post_news { display: none;} /*评论框大小*/ #tbComm ...
- 别老嫌Mac系统难用 这些快捷键你都用过吗
苹果今年10月发布的全新带把儿(bar)的MacBook,轻薄炫酷的外观大受欢迎,其中当然不乏很多从Windows转到Mac阵营的用户.不少习惯了Windows操作习惯的用户在上手Mac时都会觉得非常 ...