为何图2整体会变小？

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

width: 500px;

height: 200px;

border: 30px solid rgba(255, 0, 0, 1);

padding: 50px;

background: url("http://img1.sycdn.imooc.com/climg//582c342b0001fd6507000210.jpg");

background-clip: padding-box;

}

div:hover{

background: url("http://img1.sycdn.imooc.com/climg//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>

wt涛 2020-09-28

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

收起

3回答

好帮手慕码 2020-09-29 09:48:59

同学你好，background-position:50% 50% ;是生效的。可以打开控制栏（按F12）调试看一下：

不过这样写不符合练习要求，

建议参考“好帮手慕星星”老师提出的修改建议去修改样式哦：

祝学习愉快~

收起回答

好帮手慕久久 2020-09-28 16:03:44

同学你好，问题解答如下：

当背景图未设置background-size时，它会在显示区域内，自适应显示。

鼠标未移入时，背景图的显示区域是padding-box（background-clip: padding-box;）：

而鼠标移入后，背景的显示区域是content-box（background-clip: content-box;)：

由于背景图的可显示的范围变小了，所以背景图自适应后，整体就小了。

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

收起回答

好帮手慕星星 2020-09-28 15:35:24

同学你好，首先这两张图片的大小不一致

第二张小一些，所以实现的效果看着会变小。

代码还需要修改：

1、边框默认有透明效果，移入的时候就不需要再添加了

2、默认图片是不重复的，否则一开始显示的图片重复

3、改变div大小，移入的时候看到图片显示到边框的效果

参考

自己再测试下，祝学习愉快！

收起回答

提问者 wt涛 #1

div:hover{ background: url("http://img1.sycdn.imooc.com/climg//582c34220001091605000150.jpg")no-repeat ; background-origin:content-box; background-clip: border-box; background-size: 100%; background-position:50% 50% ; 为何这边用 background-position百分比定位不可以啊？像素的话是可以的？

2020-09-28 20:12:16