老师这样可以吗？
来源：2-7 编程练习
丹叔
2020-12-25 16:14:13
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background-origin</title>
<style type="text/css">
*{padding: 0;
margin: 0;}
div{
width: 250px;
height: 150px;
background: url(1.jpg) no-repeat;
background-clip: padding-box;
border: 15px solid rgba(101, 99, 248, 0.212);
float: left;
}
div:hover{
background-image: url(2.jpg);
background-clip: border-box;
background-origin: content-box;
background-position: 10px 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1回答
-
同学你好，效果正确，可做如下优化：
div不用设置浮动；鼠标移入div时，背景图的起始点是内容区左上角，所以可以给div添加上padding，这样效果才更符合题意：
祝学习愉快！
0
相似问题