background-position 属性值 可以是 length 长度 , 也可以是 position 方位 ; length 长度 : 百分数 :如 50% ; 浮点数 + 单位 :如 : 150.5px ; position 方位 :设置的是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ; 左上右下 :top , bottom , left , right ; 中间:center 2、注意事项 ...
background-position指的是背景的开始坐标，假如有一个这个意思就是，层的背景图片是从div的左上角(0,0)向x轴（向右）方向偏移20px;向y轴（向下）方向偏移30px;
background-position有两个属性值, background-position:x | y,用法上可以对其一个属性单独使用 background-position-x 和 background-position-y。 background-position属性值有三种情况 提示: background-position两个属性值可以混用,例如:方向值和数值、数值和百分比,并非x轴和y轴需要设置为同一类型的属性值,这点...
是用来定位图片的位置的，最主要使用在 一张png 上有多个logo 或者 ico 这个时候就用到background-position了。background-position：x y x等于平行轴 y等于竖行轴，x y的取值可以为正数，也可以是负数。background-position: left -29px; 是背景位移，background-position后面有两个属性，第一个是...
background-position百分比计算公式: (容器宽度—背景图片的宽度)*x%=xpx (容器高度—背景图片的高度)*y%=ypx 上节我们使用的图片也可以继续拿来做练习: <!DOCTYPE html>背景定位练习.box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box9{float:left;width:100px;height:100px;background...
在CSS中,背景图片的定位方位有3种: 1)关键字:background-position: top right; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。
DOCTYPE html>span { background: url(../img/abcd.jpg) no-repeat; float: left;}span:first-child { width: 108px; height: 111px; background-position: -367px -416px;}span:nth-child(2) { width: 110px; height: 113px; background-position: -369px -275px;}span:nth-child(3) { width...
如果background-position属性值只设置一个,则用于 x 轴方向,y 轴方向使用默认值 center,即垂直居中。 雪碧图 CSS雪碧图即CSS Sprites,也叫CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分。
CSS背景定位属性background-position可以用来设置背景图像的位置。 可以使用以下值来设置background-position属性: 关键字:left、center、right、top、bottom,分别表示背景图像在容器内的左、中、右、上、下位置。 百分比值:使用百分比值来设置背景图像的位置,例如50% 50%表示背景图像在容器的中心位置。 像素值:使用像素...