背景图片定位background-position用法详解

作者: AG亚游集团 分类: 媒体专栏 发布时间: 2018-01-04

背景图片定位background-position用法详解:

background-position的写法:

1)关键字:background-position: left top;

2)像素:background-position: 0px 0px;

3)百分比:background-position: 0% 0%;

均表示将图片定位在左上角。第一个元素值指的是距离左边的距离,第二个元素值指的是距离上边的距离。但百分比与其他两种是有所区别的。

直接举例:

1.background:url(/image/header.jpg) no-repeat 30% 30%;

背景图片的(30%, 30%)的点与其所属的div的(30%, 30%)的点对齐。图片中的该定位点与元素中的定位点重合,即该元素其实设置了两个效果。

2.background:url(/image/header.jpg) no-repeat left top; /*相当于0% 0%*/

表示背景图片在指定div的位置,从左上角开始

3.background:url(/image/header.jpg) no-repeat right bottom; /*相当于100% 100%*/

表示背景图片从指定div的右下角开始显示图片,并且背景图片右下角与div的右下角重合

4.background:url(/image/header.jpg) no-repeat 300px 200px;

即背景图片距div的左边界300px,距div的上边界200px。

5.background:url(/image/header.jpg) no-repeat 50% 50% ;

/* 相当于background:url(/image/header.jpg) no-repeat center ; */

背景图片在div中水平方向与竖直方向都居中显示

6.background:url(/image/header.jpg) no-repeat 300px; /*相当于300px 50%*/

若只写一个参数,则另一个参数默认为50%,即背景图片距div的左边300px,而竖直方向居中。

7.background:url(/image/header.jpg) no-repeat -300px -100px ;

背景图片相对于div左上角(0px,0px) 又向左移动了300px,向上移动了100px

本页标签: 背景图片 定位



如果觉得本文对您有用,请您任意打赏。博主QQ/微信:468161447