CSS中的background-position使用技巧

372 阅读1分钟

一、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百分比(百分比都取正值)},超出的部分隐藏。

参考:www.zhangxinxu.com/wordpress/2…