CSS中background-position使用技巧

Posted Newbie_小白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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百分比(百分比都取正值)},超出的部分隐藏。

 

总结:利用div大小和十字架原理,可以用background-position属性实现大图里面抠取小图。

以上是关于CSS中background-position使用技巧的主要内容,如果未能解决你的问题,请参考以下文章

css问题background的简写中background-position和background-size的顺序问题

CSS 背景位置 background-position属性

css中background-position问题

CSS里面背景图像使用background-position定位显示的时候怎么才能让背景平铺?

CSS里面背景图像使用background-position定位显示的时候怎么才能让背景平铺?

使用带有透明像素的 CSS Sprites 和 repeat-x background-position