我想给一个div添加一个背景,位置在右中间,但是!,对图片进行一些填充.div为文本添加了填充,所以我想将背景缩进一点.可能最有意义,例如:

http://jsbin.com/umuvud/edit#javascript,html,live

谢谢

推荐答案

Updated Answer:

有人多次 comments 说,这不是这个问题的正确答案,我同意这一点.回到写这个答案的时候,IE9还很新(大约8个月大),包括我在内的许多开发人员都需要一个解决方案来解决<;=IE9.IE9就是IEstarted supporting 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>

Original Answer:

你可以用与背景 colored颜色 相同的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;
}

Css相关问答推荐

如何使一组元素的行为像字符串一样?

Tailwind仅在启用时才在按钮上设置group-hover

JavaFX如何在Tableview中使用默认和自定义的列标题CSS样式?

如何在Angular material 选项卡中设置自定义圆角下划线的样式

try 在Jekyll中使用多个SCSS文件时出错

关闭Superset中的Deck.gl工具提示

将CSS栅格行高设置为其余视口高度

使用高图的背景大小渐变

如何通过重复的网格区域来简化网格布局?

混合网格自动布局与固定的行列位置

为什么我的 CSS 转换在 React 18 中不起作用

Tailwind CSS: Select 单选按钮时不应用同行判断的边框

带填充的水平边框

Icomoon:如何避免重复索引(具有相同内容 ID 的不同图标)?

纯 CSS/JS 的 SVG 连续向内方形螺旋动画

JavaFX TreeTableView Css for unfocused selected line

弹性框中的边距折叠

使用 inline-block 换行?

我应该在我的 Bootstrap 项目中使用 normalize.css 吗?

React - 防止父子事件触发