backgroundposition的简单介绍

http://www.itjxue.com  2023-01-09 02:19  来源:未知  点击次数: 

background-position属性是什么?

background-position属性是设置背景图像的起始位置。

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

需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

注意事项

x%y% 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。默认值为:0%0%。

xposypos 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions。

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是什么意思

background position

背景的位置;

[例句]I think my background meetsrequirementthis position.

我想我背景符合这份工作要求。

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 值。

所以你设置的这个的意思是中上部

background-position属性是什么?

background-position:0% 0%; 这表示背景图片的左上角与容器的左上角对齐?的确是这个现象,但话不能这么说,因为 background-position 计算位置时用的并不是背景图片的左上角作为基点。

background-position 是将背景图片的中心点作为基点 如上图,容器是 400px * 400px,背景图片是 200px * 200px,上图是:background-position:50% 50%。 那么 background-position:0% 0% 时:第一个 0% 就代表背景图片的中心点与左边红线重合。

第二个 0% 就代表背景图片的中心点与上边红线生命。 那么 background-position:100% 100% 时:第一个 100% 就代表背景图片的中心点与右边红线重合;第二个 100% 就代表背景图片的中心点与下边红线生命。 也就是说在 0%-100% 之间,图片的中心点被限制在一个范围内: 这个范围距离容器左边缘右边缘均是背景图片宽度 / 2。

(责任编辑:IT教学网)

更多

推荐其他源码文章