当前位置: 首页 > Web前端 > CSS

CSS背景位置background-position属性

时间:2023-03-30 23:58:54 CSS

background-position属性需要2个参数值,第一个值用于横坐标,第二个值用于纵坐标,默认值为0%0%,即背景图像左上角与对象背景区域的左上角对齐。如果只提供一个值,则用于x轴方向,y轴方向使用默认值center,垂直居中。例子div{width:200px;高度:200px;边框:1px虚线#ccc;背景重复:不重复;背景位置:中心中心;background-image:url(img/bg.gif);}背景图有3种定位方式关键字定位水平方向可选关键字留|中心|right,垂直方向可选关键字top|中心|底部。对于关键字定位,应用对齐规则,而不是坐标规则。当xpos为left时,表示图像的左侧与物体的左侧对齐;当为右时,表示图像的右侧与对象的右侧对齐;当ypos为top时,表示图像的顶部与对象的顶部对齐;asbottom,表示图像的底部与对象的底部对齐;xpos,ypos等于center表示图像在水平和垂直方向的中心,与物体在水平和垂直方向的中心对齐。上述示例定位是指背景图像的中心与背景区域的中心对齐,即背景图像位于对象的中心。Position百分比定位x%y%:表示使用百分比定位,就是让图片本身的点(x%,y%)和背景区域的点(x%,y%)重合。最终得到背景图片起始位置坐标的计算公式为:x=(物体宽度-图像宽度)*x%;y=(物体的高度-图像的高度)*y%;当然,百分比的值也可以取负值,计算公式和上例一样,将百分比改为-50%-50%。此时背景图片起始位置坐标为:x:(200px-100px)(-50%)=100px(-50%)=-50pxy:(200px-100px)(-50%)=100px(-50%)=-50px长度值定位xy:表示使用长度值定位,即将背景图片的左上角放置在背景区域中(x,y)指定的位置对象,即x,y定义了背景图像的左上角,相对于背景区域左上角的偏移量。偏移长度可以是正数或负数。x的正值表示右移,负值表示左移;y为正值表示向下移动,负值表示向上移动。背景图片移动后,可能会超出物体的背景区域。此时超出的部分不会显示,只会显示落入背景区域的部分。