打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
CSS中background-position属性说明
1.
background-position:left top;

背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。

等同于 background-position:0,0;

也等同于background-position:0%,0%;

2.

background-position:right bottom;

背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。

等同于background-positon:100%,100%;

也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

3.

background-position:500px 15px;

背景图片从容器(container)左上角的地方向右移500px,向下移15px,超出的部分隐藏。

4.

background-position:-500px -15px;

背景图片从容器(container)左上角的地方向左移500px,向上移15px,超出的部分隐藏。

5.

background-position:50% 50%;这句经常让新手出错!

等同于left:{容器(container)的宽度—背景图片的宽度}*left百分比,超出的部分隐藏。

等同于right:{容器(container)的高度—背景图片的高度}*right百分比,超出的部分隐藏。

例如:background-position:50% 50%;就是background-position:(1000-2000)*50%px,(500-30)*50%px;即background- position:-500px,235px;也就是背景图片从容器(container)的左上角向左移500px,向下移235px;

6.(这种情况背景图片应该用bg2.jpg才能看出效果,bg.jpg的高度太小效果不明显)

background-position:-50% -50%;

等同于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超出的部分隐藏。

等同于right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超出的部分隐藏。

例如:background-position:-50% -50%;就是background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;即 background- position:-250px,-70px;也就是背景图片从容器(container)的左上角向左移250px,向上移70px;
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
background
[老法新用]使用padding
CSS中背景图片定位方法
很多人css数值(百分比|负值)基准分不清,今天给你讲讲
CSS三列等高布局
宽度高度不固定的div,如何水平居中以及垂直居中
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服