请问老师这样实现可以么? 谢谢!
来源:2-7 编程练习
Cloud_轩
2020-12-04 15:50:45
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-origin</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: none;
}
div{
width: 300px;
height: 150px;
border: 10px solid #6699ff;
padding: 10px;
background: url(http://climg.mukewang.com/582c342b0001fd6507000210.jpg) no-repeat;
background-clip: padding-box;
}
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>
1回答
同学你好,样式需要调整,默认边框应该有透明效果,可以使用rgba()完成。示例:

鼠标移入时,让图片绘制到区域,可以添加background-clip:border-box;属性,示例:

祝学习愉快~
相似问题