谢谢！解决方案 更新后的答案:已经多次评论这不是对这个问题的正确答案，我同意.早在撰写此答案时，IE 9仍然是新的(大约8个月大)，包括我自己在内的许多开发人员都需要< = IE 9的解决方案. .org/zh-CN/docs/Web/CSS/background-origin#Browser_compatibility"rel =" noreferrer>开始支持background-origin .但是，已经过去了六年半，所以我强烈建议您使用实际边界，这是更新的解决方案.如果<需要IE 9支持.我的原始答案可以在演示代码片段的下面找到.它使用不透明的边框来模拟背景图像的填充. #hello { padding-right: 10px; background-color:green; background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8; background-origin: content-box;} <p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>原始答案:您可以使用与背景颜色相同的10px边框来伪造它: http://jsbin.com/eparad/edit#javascript,html,live #hello { border: 10px solid #e8e8e8; background-color: green; background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif") no-repeat scroll right center #e8e8e8;}I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/ example:http://jsbin.com/umuvud/edit#javascript,html,liveThanks! 解决方案 Updated Answer:It's been commented multiple times that this is not the correct answer to this question, and I agree. Back when this answer was written, IE 9 was still new (about 8 months old) and many developers including myself needed a solution for <= IE 9. IE 9 is when IE started supporting background-origin. However, it's been over six and a half years, so here's the updated solution which I highly recommend over using an actual border. In case < IE 9 support is needed. My original answer can be found below the demo snippet. It uses an opaque border to simulate padding for background images.#hello { padding-right: 10px; background-color:green; background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8; background-origin: content-box;}<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>Original Answer:you can fake it with a 10px border of the same color as the background:http://jsbin.com/eparad/edit#javascript,html,live#hello { border: 10px solid #e8e8e8; background-color: green; background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif") no-repeat scroll right center #e8e8e8;} 这篇关于定位背景图片，添加填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
