搞不懂，加了绝对定位，效果就不能实现了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-origin</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: none;
}
div{
width: 200px;
height: 100px;
border: 8px solid transparent;
background-image: url(http://img1.sycdn.imooc.com/climg//582c342b0001fd6507000210.jpg);
}
div:hover{
background: url(http://img1.sycdn.imooc.com/climg//582c34220001091605000150.jpg) no-repeat 10px 10px;
background-origin: content-box;
}
span.div_padding{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
border: 8px solid red;
}
</style>
</head>
<body>
<div></div>
<span class="div_padding"></span>
</body>
</html>
正在回答
同学你好，关于你的问题，回答如下：
1、rgb(0,0,255,0.4)这个是没有效果的，rgb只是颜色，不包括透明度（第四个参数是透明度），rgba才是四个参数。
2、如下，background-clip: border-box;的时候，图片时从边框开始的。
background-clip: padding-box;的时候，效果是从内容开始的，不在边框的部分，
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星