右对齐背景图像答案

【问题标题】：Aligning background image to right右对齐背景图像
【发布时间】：2017-09-13 22:21:51
【问题描述】：

在第二个框中，注意箭头在同一个位置。如何让它与 div 一起流动？

在background 属性中使用scroll right center 有效，但我想保留一些正确的填充。

我也在尽量避免使用 2 个 div 或标签。这是否可以通过 .box div 实现？

【问题讨论】：

【解决方案1】：

.right-align-background {
    background-position: center right;
}

http://jsfiddle.net/Zx836/1/

【讨论】：

谢谢，按照说明可以正常工作，但我需要像第一个框中一样向右填充。使用center right，箭头被推到了极限。
最佳跨浏览器解决方案！
最佳答案 *imo

【解决方案2】：

如果您希望背景与您在元素上设置的填充对齐，也可以使用 background-origin: content-box;。

类似这样的：

input.error {
 background: no-repeat;
 background-image: url('../images/field-error.png');
 background-position: right center;
 background-origin: content-box;
 padding-right: 5px;
}

【讨论】：

甚至不知道这个存在！完美解决方案

【解决方案3】：

使用:after 代替添加图像怎么样？

.box {
    background: #a6cf83;
    float:left;
    color:#333;
    font-weight:bold;
    padding:8px;
}

.box:after {
    content: url(http://cdn1.iconfinder.com/data/icons/humano2/24x24/actions/new-go-next.png);
}

【讨论】：

【解决方案4】：

Calc() has 95% browser support in the US now（2017 年 9 月），并为这个问题提供了一个优雅的解决方案。

background-position: calc(100% - 24px) center;

【讨论】：

【解决方案5】：

如果您需要在右侧填充，我认为您可能必须使用百分比：

background-position:95% 50%;

如果你的元素宽度相似，效果会很好。

【讨论】：