这个center为啥是在这个位置,这个定位不是相对于内容吗。居中的这个效果是啥意思

这个center为啥是在这个位置,这个定位不是相对于内容吗。居中的这个效果是啥意思

这个center为啥是在这个位置,这个定位不是相对于内容吗。居中的这个效果是啥意思

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2019-06-13 14:36:29

同学你好, 这个center是background-position的属性值, 表示设置背景图像的位置从中间开始显示, 简单理解就是需要显示图片的容器div固定不变, center让图片的中心位置在这个容器中显示。

http://img1.sycdn.imooc.com//climg/5d01ed4500010e6006140335.jpg

 整张图片大小如下图所示

http://img1.sycdn.imooc.com//climg/5d01ed950001735719200678.jpg

设置center属性后, 本来因该是如下图展示效果, 图片中间的部分显示在容器中

http://img1.sycdn.imooc.com//climg/5d01edf800013fc910190607.jpg

视频中老师的展示的效果是由于设置了background-attachment属性为fixed,对定位属性造成了影响, 所以展示的效果如下图所示

http://img1.sycdn.imooc.com//climg/5d01ee420001d2d010160608.jpg

同学可以自己在测试一下, 加深理解哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • background-attachment属性为fixed,对定位属性造成了影响,请问一下具体是怎么影响的呢
    2019-07-12 14:09:32
  • 你好,设置background-attachment属性为fixed之后,图片相对于视口进行定位显示,所以div中显示的内容就是图片相对于浏览器视口部分的内容,自己可以测试理解下。祝学习愉快!
    2019-07-12 19:44:10
  • 可以理解为设置fixed之后,图片会固定在视口左上角,然后显示与div重叠的部分吗
    2019-07-12 21:22:42
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师