老师我问个关于background-size的问题

之前学习的background-clip可以用三种方式裁剪背景图片，然后这里讲到了关于background-size的属性，我想知道这里，比如background-size:90%;，这个90%是基于容器宽度的，那是相对于边框宽度还是加上padding宽度还是内容宽度什么的？是否和background-clip设置的裁剪方式有关？

谢谢老师！

Rockets总冠军 2019-05-30

源自：CSS3背景与渐变 2-15 编程练习

10

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2019-05-31 09:31:12

同学你好，background-size设置的百分比是基于背景图片显示区域的宽度来计算的。与background-clip设置的剪裁方式有关，老师这里给你举的简单的例子对比一下。

1、默认背景图片是从padding区域开始填充的

效果图：可以看出设置的百分百宽度刚好占满padding开始的区域

2、设置剪裁方式，让给背景从内容区域开始显示

效果图：可以看出百分百宽度是充满了内容区域

结合上述的例子，可以总结出背景图片的百分比是基于图片显示区域的大小计算的

同学可以自己下去测试一下效果，加深理解哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

Rockets总冠军提问者 #1

谢谢老师解答！老师您好，可是在您使用background-clip:content;之后，看图片效果只是把之前100%充满padding的背景图裁剪了，而不是通过100%填充进内容框的。也就是如果老师这里初始给的width是50%，那么clip改为content之后，背景图片还是padding边的50%而不是content宽度的50%。我去实验一下。

2019-05-31 10:30:20

好帮手慕慕子 2019-05-31 13:37:15

同学你好，clip改为content之后，背景图片显示的是content宽度的50%

老师这里将盒子的宽度调大一点，让同学可以更清晰的观察区别，设置background-clip属性

效果图：此时图片显示的宽度是从内容区域开始计算的，左侧被裁减的部分不算入背景图片的显示宽度中，所以50%是基于content的宽度计算的。

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

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

提问者 Rockets总冠军 #1

嗯嗯，感谢老师！我自己也测试了，非常感谢老师的耐心回答！谢谢

2019-05-31 13:43:39

相似问题

请问background-size为何不起作用

关于background的问题

关于浏览器兼容的font-size问题

关于作业题里面的问题

关于background

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号