第五屏的背景图片这里是不是高度应该设为图片高度,而不是测量高度吧.

第五屏的背景图片这里是不是高度应该设为图片高度,而不是测量高度吧.

/*第五屏*/

.screen-5{

background-color: #d9dde1;

height: 800px;

position: relative;

overflow: hidden;

}

.screen-5__bg{

width: 1920px;

height: 433px;

/*height: 572px;*//*老师用的是在psd上测量的高度433,但是这个背景图片没有完全展示,我认为应该为图片的高度527px,然后在父元素设置overfl:hidden.吧。*/

background: url("../img/bg-screen-5.png") center no-repeat;

background-size: contain;

position: absolute;

left: 50%;

margin-left: -960px;

bottom: -198px

}


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

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

2回答
好帮手慕码 2019-07-17 18:39:51

同学你好!
与二三屏幕不同,首先是因为,这个图本来就没有显示完全(被下面遮挡了一部分),所以设置在screen-5_bg中,它的测量高度其实是如下的:

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

如果按照原图的高度,需要设置更大的bottom。所以就选取了测量的高度。不同就是按照视频中一定程度上将图片压缩了。如果是在工作中,需要按照设计稿去做哦~

如果帮助到了你 欢迎采纳 祝学习愉快~


  • 提问者 weixin_慕仔2495609 #1
    第二屏和第三屏也没有显示完全啊?
    2019-07-17 18:47:02
  • 同学可以不要纠结这块内容哦,两种方法都是可以实现的,这里只是演示了另一种方式。不同的就是按原图会比较大,不会被压缩,按照标注样图片压缩一些。 如果帮助到了你 欢迎采纳 祝学习愉快~
    2019-07-17 19:27:13
好帮手慕码 2019-07-17 17:37:57

同学你好!

同学这种设置方法也是可以的,这样设置避免了图片被拉伸或者是压缩。但是在工作中需要严格的按照设计稿去布局, 设计稿中会标注各个内容的大小。

如果帮助到了 欢迎采纳 祝学习愉快~

  • 提问者 weixin_慕仔2495609 #1
    可是我看老师之前都是用的图片的高度呢,比如第三屏和第二屏的phone。这两种会导致什么不同效果吗
    2019-07-17 17:41:21
  • 午炎子栩 回复 提问者 weixin_慕仔2495609 #2
    把screen-5__bg尺寸设置为2686x572 把水平居中用的负边距法的margin-left改为-1343 bottom:-100改为侧量的top:365 现在呈现的效果就是设计稿一模一样的效果
    2019-08-11 11:38:45
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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