background-position CSS background-position的定义和用法
各位老铁们好,相信很多人对background-position都不是特别的了解,因此呢,今天就来为大家分享下关于background-position以及CSS background-position的定义和用法的问题知识,还望可以帮助大家,解决大家的一些困惑,下面一起来看看吧!
CSS background-position的定义和用法
background-position属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image定义)的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment属性设置为 fixed,才能保证该属性在 Firefox和 Opera中正常工作。默认值: 0% 0%继承性: no版本: CSS1 JavaScript语法: object.style.backgroundPosition=center如何定位背景图像:
body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}
背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。 background-positon:长度单位/关键字;语法中的取值包括两种,一种是采用长度单位,另一种是关键字描述。长度单位指的是px、百分比等。当background-position取值为关键字时,也需要设置水平方向和垂直方向的值,只不过值不是使用px为单位的数值,而是使用关键字代替。属性值说明top left左上top center靠上居中top right右上left center靠左居中center center正中right center靠右居中bottom left左下bottom center靠下居中bottom right右下
background-position: center top;是什么意思
background-position属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image定义)的位置,背景图像如果要重复,将从这一点开始。
如果您仅规定了一个关键词,那么第二个值将是"center"。
默认值:0% 0%。
x% y%
第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。
xpos ypos
第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。单位是像素(0px 0px)或任何其他的 CSS单位。
如果您仅规定了一个值,另一个值将是50%。
您可以混合使用%和 position值。
所以你设置的这个的意思是中上部
CSS background-position的用法
是用来定位图片的位置的,最主要使用在一张png上有多个logo或者 ico这个时候就用到background-position了。
background-position:x y x等于平行轴 y等于竖行轴,x y的取值可以为正数,也可以是负数。
background-position: left-29px;是背景位移,background-position后面有两个属性,第一个是水平位置,第二个是垂直方向的位置,这里需注意的是两个属性的顺序
比如:
background-position: left-29px;(当中的left指从图片的最左端读起,-29px就是将图片向上移动29px,然后开始读)
扩展资料:语法
background-position: length|| length
background-position: position|| position
取值
length:百分数|由浮点数字和单位标识符组成的长度值。
position: top| center| bottom| left| center| right
注:设置或检索对象的背景图像位置,必须先指定 background-image属性,该属性定位不受对象的补丁属性( padding)设置影响。
默认值为: 0% 0%。此时背景图片将被定位于对象不包括补丁( padding)的内容区域的左上角,如果只指定了一个值,该值将用于横坐标,纵坐标将默认为 50%,如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center,因为 right作为横坐标值将会覆盖 center值,所以背景图片将被居右定位,对应的脚本特性为 backgroundPosition。
background-position属性是什么
background-position属性设置背景图像的起始位置。
background-position属性用于控制背景图片在元素中的位置。这个位置指定的是图片左上角相对于元素左上角的位置。
在下面的例子中,使用background-position属性来控制背景图片的位置,同时设置background-repeat为no-repeat;单位是像素;第一个数字表示水平(x轴)位置,第二个数字表示是垂直(y轴)位置:
/*例1:默认值*/。
background-position: 0 0。
/*图片左上角对齐元素的左上角*/。
/*例2:把图片向右边移动75像素*/。
background-position:75px 0。
/*例3:把图片向左移动75像素*/。
background-position:-75px 0。
/*例4:把图片向下移动100像素*/。
background-position: 0 100px。
文章分享到这里,希望我们关于background-position的内容能够给您带来一些新的认识和思考。如果您还有其他问题,欢迎继续探索我们的网站或者与我们交流,我们将尽力为您提供满意的答案。