老师，我的问题是本节的2-7编程练习。
来源：2-7 编程练习
慕斯0469344
2019-06-25 15:14:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-origin</title>
<style type="text/css">
*{
padding:0;
margin:0;
border: none;
}
div{
position: relative;
width:500px;
height: 150px;
border: 10px solid #abcdef;
padding:10px;
background:url(http://climg.mukewang.com/582c342b0001fd6507000210.jpg) no-repeat center center;
background-clip: padding-box;
}
span.div_padding{
position: absolute;
width: 500px;
height: 150px;
border: 10px solid transparent;
}
div:hover span.div_padding{
background: url(http://climg.mukewang.com/582c34220001091605000150.jpg) no-repeat 10px 10px;
background-origin: border-box;
}
</style>
</head>
<body>
<div><span class="div_padding"></span></div>
</body>
</html>我的问题是：在替换背景图画的时候，第一张的背景图片在边角还存在。
写回答
1回答
-
你好，写的是有问题的哦，使用一个div即可，里面嵌套的span标签设置上背景颜色之后并没有替换掉div中，所以div中的背景还是显示的，可以修改为：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>background-origin</title> <style type="text/css"> * { padding: 0; margin: 0; border: none; } div { position: relative; /*宽高设置小一些*/ width: 450px; height: 140px; /*边框设置成透明度*/ border: 10px solid rgba(0, 0, 255, 0.5); padding: 10px; background: url(http://climg.mukewang.com/582c342b0001fd6507000210.jpg) no-repeat center center; background-clip: padding-box; } /*直接给div添加图片即可*/ div:hover { background: url(http://climg.mukewang.com/582c34220001091605000150.jpg) no-repeat 10px 10px; /*设置定位从内容框开始*/ background-origin: content-box; } </style> </head> <body> <div></div> </body> </html>自己修改测试下，祝学习愉快！
0
相似问题