background-origin设置背景图像的参考原点(位置)
- padding-box:从 padding区域(含 padding)开始显示背景图像;
- border-box:从 border区域(含 border)开始显示背景图像;
- content-box:从 content区域开始显示背景图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.pic{
width: 406px;
height:300px;
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603881365383&di=0a70eec494aaa4d38106556d913f7b4c&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-09-25%2F5ba9957dc955a.jpg) no-repeat;
border: 10px dashed skyblue;
padding: 30px;
background-size: cover;
background-origin: content-box;
}
</style>
</head>
<body>
<div class="pic"></div>
</body>
</html>