CSSS背景图像区域

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background-origin</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
margin: 0 auto;
width: 300px;
height: 100px;
border: 20px rgba(0, 0, 255,0.2) solid;
/*要实现背景图片覆盖边框的效果*/
padding: 20px;
background: url(http://img1.sycdn.imooc.com/climg//582c342b0001fd6507000210.jpg) no-repeat;
background-clip: border-box;
}
</style>
<body>
<div></div>
</div>
</body>
</html>

为什么左和上边框没有背景图片覆盖，在审查元素才能看到？

weixin_慕的地5241954 2019-08-24

源自：CSS3背景与渐变 2-2 背景图像区域（ background-clip）

收起

1回答

卡布琦诺回答被采纳获得+3积分 2019-08-24 15:50:05

同学你好，如果想要上和左覆盖图片，需要设置background-origin:border-box;而不是background-clip: border-box;

希望可以帮到你！

收起回答

weixin_慕的地5241954 提问者 #1

你说的方法我试过了可以，background-origin:border-box;是定位背景图像区域，background-clip: border-box; 是绘制背景图像区域，我问的是第二种方法，我自己找到原因了：因为背景图片的的起始位置不规定的话，默认是从左上边框开始，所以要设置水平垂直center center。

2019-08-24 19:15:57
卡布琦诺回复提问者 weixin_慕的地5241954 #2

这里老师考虑不够周全，同学能够自己发现问题，并解决，棒棒哒！

2019-08-24 19:31:24