老师您好,这个背景图片为啥跑到右下角了?不是设置了center吗?

老师您好,这个背景图片为啥跑到右下角了?不是设置了center吗?

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

视频里老师的代码算重复设置吗?

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

正在回答

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

3回答

同学你好,你说的这是一个原因,是显示的原因。但是这两个样式中都有设置这个属性。这两个的区别就是分开写的多了一个background-size: 50%;属性哦。

祝学习愉快!

好帮手慕糖 2019-07-28 18:43:50

同学你好,1、不是的哦。

2、前两句是对的。即:设置完background-attachment: fixed和background-position: center center,导致div中的背景图片就变成了整个浏览器页面的中心了。这个是对的。

3、这两个效果都是这样的。第一次的时候,其实也是相对于窗口居中,因为第一次也有设置居中与定位。不过这个图片太大了,充满了我们看到的这个区域。

(1)按照第一次设置,可以改变下窗口的大小,会发现现实的图片不是一样的。就是因为图片太大了,我们只能看到这个区域中的部分。

(2)而第二次设置的有background-size: 50%;,图片缩小了,所以我们看到的没有占满盒子了。也可以改变下窗口大小,显示的图片也是会改变的哦。

可以总结下,这个是相对于浏览器窗口居中的,但我们没有看到完整的图片,只看到了这个区域内的部分哦。你可以把div的宽度设置100%,这样可以看到这个区域外的部分,会发现图片是很大的哦。

希望能帮助到你,祝学习愉快!

  • 提问者 键盘上的莫扎特 #1
    就是因为设置了background-clip: content-box,把图片只裁剪到内容盒子才导致图片没有显示完全吧,老师刚才试了下,图片太大就是显示不出来,因为div太小
    2019-07-28 19:35:32
好帮手慕糖 2019-07-28 16:34:24

同学你好,1、如下,第一个写的是统一写的,这里的center,与50%,都是代表的位置,都表示居中;不过一个使用了关键字,一个使用了

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

2、如下,这个是分开写的,两个center,分别表示水平与竖直方向的位置。

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

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

3、background-attachment属性为fixed之后,图片相对于视口进行定位显示,所以div中显示的内容就是图片相对于浏览器视口部分的内容。

这里两个效果都是居中的,但是显示效果不一样,主要是因为:background-size设置的是背景图片的大小,设置为50%,宽度会是原本图片宽度的50%;

希望能帮助到你,欢迎采纳。

祝学习愉快!

  • 提问者 键盘上的莫扎特 #1
    意思是设置完background-attachment: fixed和background-position: center center,导致div中的背景图片就变成了整个浏览器页面的中心了,就不在盒子里居中了,图片跑的右下角其实是整个页面的中心,老师我理解的意思对吗?
    2019-07-28 17:51:18
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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