css中background-position:的属性值为百分比时的用法
2016-12-06 17:49
330 查看
如果定位用的是百分比话,算法比较特殊。我举个例子:
这个时候图片应该在容器的什么位置呢,算法公式如下:
图片左顶点距容器左顶点的坐标位置为
x:(容器的宽度-图片的宽度)x 50%
y:(容器的高度-图片的高度)x(-30%)
得到的结果应用坐标法则,差值如果为负数,百分比为正那么运算结果是负值。如果差值为负数,
百分比也为负数,那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。
比如:容器是width:600px;height:600px;而图片是width:200px;height:200px;
我们用上面的样式,可以得到图片位置为:
x:(600px-200px)*50%
y:(600px-200px)*(-30%)
如下图:
相关链接
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:
}
[/code]
这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
}
[/code]
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。
background:#FFF url(image) no-repeat fixed 50% -30%;
这个时候图片应该在容器的什么位置呢,算法公式如下:
图片左顶点距容器左顶点的坐标位置为
x:(容器的宽度-图片的宽度)x 50%
y:(容器的高度-图片的高度)x(-30%)
得到的结果应用坐标法则,差值如果为负数,百分比为正那么运算结果是负值。如果差值为负数,
百分比也为负数,那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。
比如:容器是width:600px;height:600px;而图片是width:200px;height:200px;
我们用上面的样式,可以得到图片位置为:
x:(600px-200px)*50%
y:(600px-200px)*(-30%)
如下图:
相关链接
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; [code]background-position:50% 50%;
}
[/code]
这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; [code]background-position:66% 33%;
}
[/code]
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。
相关文章推荐
- 自定义竖向SeekBar ,横向SeekBar 样式
- CSS3 transition效果 360度旋转 旋转放大 放大 移动
- css3 实现png图片改变背景颜色
- css代码编写空心箭头
- 《图解CSS3——第2章 CSS3选择器-1》
- css超过一定宽度显示点点
- css收集整理
- console.log改变样式
- CSS使用总结
- DOM2级样式style
- 关于Sublime text 3如何编辑less并转(编译)成css文件,亲测可用
- css学习之盒子模型应用
- 如何在Word中创建一个符合自己要求的样式
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
- Web前端开发笔记:CSS中的对象(元素)
- CSS规范之BFC & IFC
- Pure CSS for multiline truncation with ellipsis
- CSS中 !important 的使用
- css实现div,文字水平居中的方案。
- 小库