本文详细解析了如何使用CSS对背景图片进行精确定位，包括padding、border和background-origin属性对图片位置的影响，以及如何通过background-position调整图片显示区域。
背景图片距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 200px;
background: pink;
padding: 100px;
border: 80px solid blue;
background-image: url("img/1.png");
background-repeat: no-repeat;
background-origin: content-box;
background-position: -50px 0;
}
/*答案：130px*/
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
扫一扫
3920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
