background-position
来源:互联网 发布:淘宝宝贝曝光量怎么查 编辑:程序博客网 时间:2024/05/24 23:12
background-position -- 定义背景图片的位置
- 取值: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
- 水平
- left: 左
- center: 中
- right: 右
- 垂直
- top: 上
- center: 中
- bottom: 下
- 垂直与水平的组合
- x-% y-%
- x-pos y-pos
- inherit: 继承
- 水平
- 引用网址:http://www.dreamdu.com/css/property_background-position/
- 初始值: 0% 0%
- 继承性: 否
- 适用于: 所有元素
- background:背景.position:位置.
body
{
background-image
:
url('list-orange.png')
;
background-repeat
:
no-repeat
;
}
p
{
background-image
:
url('list-orange.png')
;
background-position
:
right bottom
;
background-repeat
:
no-repeat
;
}
div
{
background-image
:
url('list-orange.png')
;
background-position
:
50% 20%
;
background-repeat
:
no-repeat
;
}
说明
background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.
例如:
<percentage> <percentage>
左上角为0%, 0%. 右下角为100%, 100%.例如58%,56%就是从左上角算起,右移58%,下移56%.
<length> <length>
6cm 8cm,从左上角算起,右移6cm,下移8cm.
下面是一些等式
- top left, left top 等价于 0% 0%.
- top, top center, center top 等价于 50% 0%.
- right top, top right 等价于 100% 0%.
- left, left center, center left 等价于 0% 50%.
- center, center center 等价于 50% 50%.
- right, right center, center right 等价于 100% 50%.
- bottom left, left bottom 等价于 0% 100%.
- bottom, bottom center, center bottom 等价于 50% 100%.
- bottom right, right bottom 等价于 100% 100%.
0 0
- background-position
- background-position
- background-position
- background-position
- background-position
- background-position
- background-position
- background-position
- background-position
- background-position
- background-position
- CSS background-position Property
- CSS background-position 属性
- Background-position的妙用
- background-position详解
- ie6 滤镜 background-position
- background-position负值
- CSS background-position 属性
- 分布式基础学习_分布式计算系统(Map/Reduce)
- 揭秘Mysql 5.6 Index Condition Pushdown(ICP)
- 算法-递归分治(经典例子)
- window下添加tomcat为服务启动启动,且待oracle服务启动后再启动
- 黑马程序员——OC语言加强---ARC使用特点及注意事项
- background-position
- leetcode 64.Ugly Number-丑数
- ORACLE数据库间快速导入数据的方法
- LeetCode-Reverse Nodes in k-Group
- c++ vector各种函数介绍及其用法
- 欧拉回路(poj1041)
- codeforces 494B B. Obsessive String(dp)
- 深入Java集合学习系列:TreeSet 详解
- 结构体中的位域及小端问题