为何图2整体会变小？
来源：2-7 编程练习
wt涛
2020-09-28 14:48:41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 200px;
border: 30px solid rgba(255, 0, 0, 1);
padding: 50px;
background: url("http://climg.mukewang.com/582c342b0001fd6507000210.jpg");
background-clip: padding-box;
}
div:hover{
background: url("http://climg.mukewang.com/582c34220001091605000150.jpg")no-repeat 10px 10px;
background-origin:content-box;
background-clip: content-box;
border: 30px solid rgba(255, 0, 0, 0.6);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3回答
-
好帮手慕码
2020-09-29
同学你好，background-position:50% 50% ;是生效的。可以打开控制栏（按F12）调试看一下：
不过这样写不符合练习要求，
建议参考“好帮手慕星星”老师提出的修改建议去修改样式哦：
祝学习愉快~
0 -
好帮手慕久久
2020-09-28
同学你好，问题解答如下：
当背景图未设置background-size时，它会在显示区域内，自适应显示。
鼠标未移入时，背景图的显示区域是padding-box（background-clip: padding-box;）：
而鼠标移入后，背景的显示区域是content-box（background-clip: content-box;)：
由于背景图的可显示的范围变小了，所以背景图自适应后，整体就小了。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0 -
好帮手慕星星
2020-09-28
同学你好，首先这两张图片的大小不一致
第二张小一些，所以实现的效果看着会变小。
代码还需要修改：
1、边框默认有透明效果，移入的时候就不需要再添加了
2、默认图片是不重复的，否则一开始显示的图片重复
3、改变div大小，移入的时候看到图片显示到边框的效果
参考
自己再测试下，祝学习愉快！
0h020-09-28
相似问题