首页编程background-position CSS background-position的定义和用法

background-position CSS background-position的定义和用法

编程之家2023-11-04181次浏览

各位老铁们好,相信很多人对background-position都不是特别的了解,因此呢,今天就来为大家分享下关于background-position以及CSS 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-position CSS background-position的定义和用法

这个属性设置背景原图像(由 background-image定义)的位置,背景图像如果要重复,将从这一点开始。

如果您仅规定了一个关键词,那么第二个值将是"center"。

默认值:0% 0%。

x% y%

第一个值是水平位置,第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

background-position CSS background-position的定义和用法

如果您仅规定了一个值,另一个值将是 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的内容能够给您带来一些新的认识和思考。如果您还有其他问题,欢迎继续探索我们的网站或者与我们交流,我们将尽力为您提供满意的答案。

validationengine,validation 的js是做什么用的昆明做网站,昆明网站制作公司哪家靠谱