<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>求背景图片左边到#box盒子左边外框侧的距离</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; /* 左右 上下*/ /* background-position 和margin (上下 ； 左右） 等不一样*/ } /*答案：130px*/ </style> </head> <body> <div id="box"></div> </body> </html>
原文：https://www.cnblogs.com/FlyingLiao/p/9869288.html