2回答

好帮手慕慕子

2019-05-31

已采纳

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

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

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

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

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

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

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

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

祝学习愉快~~~

0

hockets总冠军

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

h019-05-31

共1条回复

好帮手慕慕子

2019-05-31

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

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

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

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

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

祝学习愉快~~~

0

hockets总冠军

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

h019-05-31

共1条回复