The background-position-x CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by background-origin.
CSS background-position-x 属性用于设置背景图像的初始水平位置,即用于将图像设置在水平方向的某个位置。位置是相对于定位层的,可以通过 CSSbackground-origin属性来设置。 语法: background-position-x:value; 属性值: left:用于将图像设置在左侧位置。 center:用于将图像设置在水平中心位置。 right:用于将图像设置...
下面的例子中,设置了一个背景图片并且用 background-position 属性来控制它的位置,同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴(水平)位置,第二个是 y 轴(垂直) 位置。 CSS Code复制内容到剪贴板 /* 例 1: 默认值 */ background-position: 0 0;/* 元素的左上角...
background-position 属性值 可以是 length 长度 , 也可以是 position 方位 ; length 长度 : 百分数 :如 50% ; 浮点数 + 单位 :如 : 150.5px ; position 方位 :设置的是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ; 左上右下 :top , bottom , left , right ; 中间:center 2、注意事项 ...
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...
背景位置-x | background-position-x background-position-xCSS 属性设置水平方向的位置,与每个背景图片等位置层设置属性background-origin /* Keyword values */background-position-x:left;background-position-x:center;background-position-x:right;/* <percentage> values */background-position-x:25%;/* <...
图片水平和垂直居中。与 background-position:center center;效果等同。 等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。 等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。 例如: .container{ width:300px; ...
CSS背景定位属性background-position可以用来设置背景图像的位置。 可以使用以下值来设置background-position属性: 关键字:left、center、right、top、bottom,分别表示背景图像在容器内的左、中、右、上、下位置。 百分比值:使用百分比值来设置背景图像的位置,例如50% 50%表示背景图像在容器的中心位置。 像素值:使用像素...
最后的那个center其实就是background-position值,就是告诉浏览器我这个背景图片要定位在元素box的中间位置。 看起来确实很简单,没什么可讲的,但是你真的对它所有用法都了如指掌吗? 一、关键字(top、bottom、left、right、center) 1. 两个值 background-position可以取两个值,一个为横轴方向,一个为纵轴方向。