首页 > 试题广场 >

下列关于背景定位属性 background-position

[不定项选择题]

下列关于背景定位属性 background-position 说法正确的是（）

该属性可有两个取值，第一个取值为背景图像与其容器在水平方向上的距离，第二个取值为背景图像与其容器在垂直方向上的距离

若只有一个取值，则其第二个取值默认为 50%

若此取值用百分数表示，如：20% 60%，则表示此背景图像离其容器左边的距离为整个容器宽度的 20%，离容器上边的距离为整个容器高度的 60%

若属性取值用 left、center、right、top、bottom 表示，则该属性取值的顺序可以颠倒，否则其取值顺序不能颠倒

查看正确选项

js我来了

Background-position属性

用处：配合background-image属性一起使用，用于设置背景图片在盒子中的位置

参数：xpos ypos |x% y% |x y三种,

如果只写第一个水平方向的参数，第二个垂直方向的参数会默认为：

center|50%|容器高度的一半px

Xpos：规定水平方向的对齐方式,值有left,right,center

Ypos：规定垂直方向的对齐方式,值有top,bottom,center

x%:规定图片水平方向的距离。

你会不会以为这个x%就是父级容器宽度的x%？那你就想错了哦，这里的x%指的是父级容器的宽度减去图片的宽度后的差值的x%。

举个栗子：background-position：50%，20%；

图片的宽度为 imgwidth：100px；高度为 imgheight：100px；

容器的宽度为 conwidth：200px；高度为 conheight：200px；

那么此时图片的左顶点距离容器的左顶点的水平距离就是(conwidth-imgwidth)*50%=50px,而不是conwidth*50%=100px；(很好理解的吧，不然盒子宽度200px，图片宽度100px，又距离左边100px，岂不是50%没实现水平居中而紧靠右了吗？)

由此也可以算出图片的左顶点距离容器的左顶点的垂直距离为20px

y%:对应x%

x:图片距离容器水平方向距离

y:图片距离容器垂直方向距离

编辑于 2019-10-09 22:38:15 回复(6)

wangxiaofen

A：正确✔，两个值分别是水平和垂直位置

B：正确✔，三种设置方式都是若只有一个值，那第二个值默认都是50%；
C：错误❌，实际上的位置计算方式为：x = (对象的宽度 - 图像的宽度) * x%; y = (对象的高度 - 图像的高度) * y%;

所以为整个容器宽度的20% 这种说法错误

D：正确✔

发表于 2020-05-05 11:17:53 回复(4)

JsonWang0102

20% 60%  是相对图片本身大小而言

发表于 2019-06-16 22:54:18 回复(1)

huang阿贵

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position

发表于 2021-03-31 10:23:10 回复(0)

努力努力努力努力努力再努力

D选项什么意思？

发表于 2021-09-06 15:31:07 回复(0)

___292

background-position：50%，50%，设置背景图片水平居中，垂直居中。
与定位top50%，left50%的区别：定位设置水平居中，垂直居中，需要减去自身宽高

编辑于 2021-01-19 11:40:44 回复(0)

蒲公英想养花

C：正确应该是（容器宽高-图像宽高）*百分比

发表于 2022-06-27 12:00:18 回复(0)

系守夕

没懂C

发表于 2022-09-09 15:03:16 回复(0)

我是一个保安

记录:C选项真正的计算是水平x=(容器宽度-图片宽度)*x%，y=(容器宽度-图片宽度)*y%，题目中为容器的20%错误

发表于 2021-09-08 11:08:37 回复(0)

春招年薪x冲冲冲

颠倒是啥意思

发表于 2021-02-08 08:16:53 回复(0)

waywordcode

难道尚硅谷交错了？B答案第二个值默认不是auto吗？

发表于 2020-09-20 23:15:12 回复(2)

提交观点

问题信息

上传者：小小

难度：

11条回答 1316收藏 4407浏览

下列关于背景定位属性 background-position

问题信息

热门推荐

相关试题