CSS中background-position使用技巧

 　　一.background-position:left top;

　　背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%;

　　二.background-position:right bottom;

　　背景图片的右下角和容器(container)的右下角对齐，超出的部分隐藏。等同于background-positon:100%,100%;也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

　　三.background-position:500px 15px;。

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

　　四.background-position:-500px -15px;。

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

　　五.background-position:50% 50%;。

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

　　六.background-position:-50% -50%;。

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

收藏此文 赞一下！() 打赏本站

如本文对您有帮助，就请建站学习网抽根烟吧！

支付宝打赏
微信打赏