CSS背景图像位置属性background-position百分比详解
来源:互联网 发布:网络行业都有哪些工作 编辑:程序博客网 时间:2024/05/25 01:35
body { background-image;url(beijing.gif); background-repeat:no-repeat; background-position:50% 50%; }
这使得背景图像的中心同其父元素中心对齐。换句话说,百分比值同时应用于元素及其背景图像。
为理解这一概念,让我们桌仔细观察其过程。当在某一元素里居中背景图像时,图像中被描述为50% 50%的点将与元素中同样描述的点对齐。
因此,要使背景图像横跨元素的三分之一,纵跨三分之二,可以按如下声明:
body { background-image:url(beijing.gif); backgrounf-repeat:no-repeat; background-position:33% 66%; }
这就使得图像上相对于左上角水平为三分一,垂直为三分之二的那个点与元素中的同样的点重合。
注意,百分比的水平值总是在前面。如果将上例中的这两个百分比值交换位置,那么背景图像将被放于水平三分之二,垂直三分之一处。同样,当只给出一个百分比值时,这个值为水平值,而另一个垂直百分比值被假定为50%。这同关键字一样,当只有一个关键字给出时,另一个被假定为center。如下:
body { background-image:url(beijing.gif); backgrounf-repeat:no-repeat; background-position:33%; }
则背景图像会放置于水平三分之一,垂直二分之一处。
下面给出了关键字和百分比值的对照比:
单一关键字:center、top、bottom、right、left。
等价的双关键字:center center、top center、center to、bottom center、center bottom、center right、right center、center left、left center、top left、left top、top right、bottom right、right bottom、bottom left、left bottom。
等价的百分比:50% 50%、50% 0%、50% 100%、100% 50%、100% 50%、0% 50%、0%、0% 0%、0% 100%、100% 100%、0% 100%。
background-position的缺省值为0% O%,和top left的功能一样。
这也是为什么在设置百分比值时,图像总是相对于元素的左上角开始平铺的原因所在。
文章出处:http://www.gootry.com/java-middle/article/100620233848/149
- CSS背景图像位置属性background-position百分比详解
- CSS背景图像位置属性background-position百分比详解
- CSS背景图像位置属性background-position百分比详解
- 背景图像位置 background-position
- background-position 属性设置背景图像的起始位置
- css背景属性background-position如何理解?
- CSS中背景图片位置属性background-position
- CSS背景属性Background详解
- CSS背景属性Background详解
- CSS背景属性Background详解
- CSS背景属性Background详解
- CSS背景属性Background详解
- CSS背景属性background详解
- css background控制背景图像的位置
- 【CSS学习】CSS背景background、background-position使用详解
- CSS的背景图像属性background
- CSS background-position 属性
- CSS background-position 属性
- unity与手机相关吧
- android camera(四):camera 驱动 GT2005
- PHP处理Checkbox复选框表单提交
- chromium之extension机制简单分析二:extensionservice创建及初始化
- android camera(三):camera V4L2 FIMC
- CSS背景图像位置属性background-position百分比详解
- android camera(二):摄像头工作原理、s5PV310 摄像头接口(CAMIF)
- linux tar
- CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
- 拦截器的执行顺序
- POJ 4007:计算字符串距离
- android camera(一):camera模组CMM介绍
- 在Ubuntu虚拟机中安装VMware tools异常中断 Unable to start services for VMware Tools
- C++语言知识汇集 - 02