CSS学习:关于background-position
2008-04-30 18:55
549 查看
在Rainer's CSS手册里对background-position这样写道:
默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
其实并不全是这样的,它的2个值根是据语意自动判断的
比如 background-position:left top; 和 background-position:top left ;的显示效果是一样的.top作用于y坐标使背景图片上对齐,left使背景图片左对齐.
运行代码框
<style type="text/CSS">
body {
background-image:url(http://www.webjx.com/images/logo.gif);
background-position:left top;
background-repeat:no-repeat;
}
</style>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
如果指定了background-position:100px left;由于left已经作用于x坐标,100px则作用于y坐标,它和background-position:left 100px效果一致.
运行代码框
<style type="text/CSS">
body {
background-image:url(http://www.webjx.com/images/logo.gif);
background-position:100px left;
background-repeat:no-repeat;
}
</style>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
运行代码框
<style type="text/CSS">
body {
background-image:url(http://www.webjx.com/images/logo.gif);
background-position:left 100px;
background-repeat:no-repeat;
}
</style>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
其实并不全是这样的,它的2个值根是据语意自动判断的
比如 background-position:left top; 和 background-position:top left ;的显示效果是一样的.top作用于y坐标使背景图片上对齐,left使背景图片左对齐.
运行代码框
<style type="text/CSS">
body {
background-image:url(http://www.webjx.com/images/logo.gif);
background-position:left top;
background-repeat:no-repeat;
}
</style>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
如果指定了background-position:100px left;由于left已经作用于x坐标,100px则作用于y坐标,它和background-position:left 100px效果一致.
运行代码框
<style type="text/CSS">
body {
background-image:url(http://www.webjx.com/images/logo.gif);
background-position:100px left;
background-repeat:no-repeat;
}
</style>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
运行代码框
<style type="text/CSS">
body {
background-image:url(http://www.webjx.com/images/logo.gif);
background-position:left 100px;
background-repeat:no-repeat;
}
</style>
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
相关文章推荐
- 【CSS学习】CSS背景background、background-position使用详解
- 深入浅出CSS:关于雪碧图、background-position与steps函数的三角恋情
- 前端_CSS#background-position学习
- 学习CSS中background-position的使用方法
- 【CSS基础】关于background-position
- 【CSS基础】关于background-position
- CSS学习文档、CSS背景图片的定位background-position的问题
- css学习笔记之background-position
- background-position 一个css中的常用属性
- [译] 关于CSS中的float和position
- CSS从大图中抠取小图完整教程(background-position应用)
- 关于css 中 position:relative 的理解
- css background-position (图片裁取)
- 在CSS中关于定位的内容是:position:relative | absolute | static | fixed<转>
- 关于CSS背景background属性经典的配置
- (四)学习CSS之position、bottom、left、right和top属性
- [译] 关于CSS中的float和position
- CSS中背景background-position负值定位深入理解-CSS教程
- 大前端学习笔记【七】关于CSS再次整理
- html5-CSS学习-background记录