老师问题在内容里请看一下谢谢
/*老师请问下为什么鼠标移动设置的背景图片起点是外边框，但是只有右边边框有背景下面没有？并且我把hover代码全部去掉只设置了div普通效果的background-clip:border-box之后也只有右边框有背景图片，左上下都没有，这个是为什么啊，我怎么想都想不明白，还以为是代码本身有问题。。。*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-origin</title>
<style type="text/css">
div{
width:600px;
height:300px;
border:10px rgba(123,45,67,0.5) solid;
padding:10px;background:url("http://img1.sycdn.imooc.com/climg//582c342b0001fd6507000210.jpg") no-repeat;
background-clip:padding-box;background-size:cover;}
div:hover{
background:url(
"http://img1.sycdn.imooc.com/climg//582c34220001091605000150.jpg")
no-repeat 10px 10px;
background-clip:border-box;
background-origin:content-box;
background-size:cover;}
</style>
</head>
<body>
<div></div>
</body>
</html>
正在回答
同学你好，关于同学的问题回答如下：
1、先看不添加hover的效果：
效果如下：
左边框和上边框没有背景图的原因是background-origin是padding-box，所以是从边框内显示：
如果将其改为border-box，就可以覆盖四个边了：
2、加上hover效果以后，可以将背景图片的大小改的大一点：
下边框就会有背景图了：
之所以修改背景图片的大小，是因为background-size: cover这个属性比较特殊，它不是100%那种的自适应显示，它是不会修改图片的宽高比例的。举个例子，假如父元素的宽高分别是200px、50px，背景图片的原始宽高是100px、20px，如果要把背景图片放到父元素里面，设置cover的话，按横向上走，它会放大两倍，宽变为200px，而此时的高也会乘以2，变成40px，而不是50px。所以就填充不满父元素。
这里的也是一样的，在设置了background-size: cover后，横向上超出了父容器，但是恰好高度没有。所以老师给其设置了更大的宽高，就能看出来效果了。
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星