如何使用背景图片位置
.block {
margin: 0 auto;
border: 5px solid yellow;
width: 600px;
height: 600px;
background:no-repeat url(./img/demo1.jpg);
/*background: url(./img/demo1.jpg) no-repeat scroll 10px 100px ;*/
background-size:100px 100px ;
position: relative;
background-position: 100% 100%;
-
上面代码中当未设置no-repeat属性时,背景图片会以给它设置的图片大小平铺的占满整个父容器,超出部分隐藏,如果设置了该属性就只会显示一张。两种结果如下:
注意:
1.设置或检索对象的背景图像位置时(背景图片定位属性),必须先指定background-image属性
2.该定位属性不受给对象设置的补丁属性(padding)的影响,默认值为0% 0%
3.如果只指定了一个值,该值将用于横坐标,纵坐标将默认为50%;若指定了两个值,则第二个值就用于纵坐标,原点坐标默认为父容器的左上角情况举例:
-
background-position: -100px -100px;//背景图片分别向左和上移动一个单位,则图片就会显示不见
-
background-position:100px 100px;//图片向右下方移动一个单位
-
background-position:100% 100%//图片处于容器元素右下角,与background-position:right bottom;效果等同
-
background-position:50% 50%;//图片水平和垂直居中。与backgrond-position:center center;效果等同
当x和y用百分号表示时等同于:
x = {容器(block)的宽度 - 背景图片的宽度} * 百分比。
y = {容器(block)的高度- 背景图片的高度} * 百分比。
-
background-position:-50% -50%
x和y又表示为
x = -{容器(block)的宽度 - 背景图片的宽度} * 百分比。
y = -{容器(block)的高度- 背景图片的高度} * 百分比。 -
background-size:600px 600px ; background-position:100px 100px;
//背景图片和容器一样大时
-