原文链接:
http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/1. 关键字, 例如: background-position: top right;优点: 直观, 可用性高, 各浏览器中表现一致.
缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制.
2. 像素, 例如: background-position: 0px 0px;优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.
缺点: 你必须知道确实的值.
原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.
3. 百分比, 例如: background-position: 80% 50%;
优点: 可以使用数学来控制定位, 并且比像素定位更加灵活.
缺点: IE 中无法处理复杂的百分比定位.
你可以看看这个测试.
原理, 如图. 与像素定位不同, 它的百分比位置是指容器和图片内部的相应位置作为显示的位置.
分享到:
相关推荐
CSS中背景图片定位方法:background-position的用法,附带算法
背景图效果,还附有以使用精灵图的方式解决网站中的小图标问题,这种办法相比较之前的方法,稍微有点类似,主要用到background-position属性外,还需...
那么这篇文章将详细介绍了这几种背景图片的处理方法。 正如前面所说,仅仅依靠CSS现有的属性,我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果,我们需要借助CSS的其他方法来实现...
此文为后来的教程做铺垫,转自这儿...大部分人应该习惯于使用描述性词语(left、top、center…)或者数值(20px、1em…)对背景图片定位,百分比可能比较少用,常见的有50%、100%等数值。例如希望背景图片水平居中,距
css制作的背景滑动变换的导航菜单特效,主要通过css控制背景图片的定位,在html5的浏览器下效果会展示的很有动感。
CSS Sprites 样式生成工具(bg2css) 3.2.1 (需要AIR环境,可到 Adobe站点 下载安装。)
使用背景图片的话,一般使用一些新的view层,如”jxlogo” src=”../../image/jx.png”/>等,但是小程序与html类似,一个不同的 css或wxss会占据一个位置,然后接下来的css或wxss会自动往下排版,但是很多时候这并...
那么怎么来实现一张图片在不同的地方只显示其中的一部分呢,这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过,也经常有朋友问我,所以今天就系统的说一下: 我们知道在用图片作为背景的...
固定定位可以创造性地用于背景图像或者导航区域。即使你滚动页面以阅读更多内容时,导致区域仍然保持在相同位置。不幸的是,唯一支持固定定位的 Internet Explorer 版本是最后一个版本,即 Internet Explorer7 (该...
CSS实现背景图片透明,文字不透明效果的两种方法 项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果: 背景图 + 伪类 + flite:...
设置为class="cr-bgimg"的容器将为每个图片划分四个面板,其中,在每个面板里通过background-position属性将背景图片定位在合适的位置上。所以,第一个面板将有四个切片,每个切片都有一个图片作为背景,并且位于...
本文先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案。 1.无依赖的absolute定位 在网络上,对absolute存在这样一个误解,认为绝对定位absolute的使用必须要设置父元素相对定位relative。这样的理解不能...
这款菜单大家需要注意HOVER状态下背景图片定位发生了变化,从而实现了这样的效果。 本实例是一位国外的朋友所写,不进行任何翻译,直接发出来,大家可以偿试阅读,如果遇到困难可以求助于翻译软件。 不断的提高自己...
在网页设计制作中经常会遇到这样的问题:用图片做背景时,由于显示器分辨率太大或者图片尺寸太小,在页面的两边或者下部了没有背景图片。例如:在小于1024*768分辨率时,是没有问题的。但是假如你的显示器的分辨率...
CSS图片优化就是尽量压缩图片的大小,加快... 首先将小图片整合到一张大的图片上,然后根据具体图标在大图上的位置,给背景定位。 CSS Sprites技术要点总结: 1. 小图片整合时,按照从上到下的顺序,而不要一个图
主要介绍了CSS的background属性及CSS3的背景图片设置总结,背景图片的显示区域和定位是非常值得注意的地方,需要的朋友可以参考下
背景图像定位中我们要明确的几点: 1、两个值前面一个是横向的定位,我们称为x轴方向定位。后面一个值是纵向的定位,我们称为y轴方向定位。如果只有一个值,那默认的就是x轴方向,这时y轴方向就默认的是上下居中...