Question

通过background-image将background-position的中心与div的中心对齐非常容易。我看不出有什么方法可以将background-image的中心与div的左侧对齐。

我已经尝试过使用background-position的各种不同百分比，但是我无法看到百分比在0到100％之间的精确计算方式。我知道0％是背景的左边和div的左边，而100％是背景的右边和div的右边。但是什么是-50％或200％？我认为这是根据两个项目的宽度比例进行调整的，在范围之外这毫无意义。 I made this尝试看看我是否能解决问题。

有人有其他建议来使background-image的中心对齐所设置的div的左侧吗？

Answer 1

如果我对您的理解正确-您想将背景图像的中心对齐到div的左侧。然后也许试试这个！

<div class="yourdiv" >
 <img class="yourbg" src="" >
</div>

<style>
*{
  margin: 0; padding: 0;
}
.yourdiv{
  width: 500px; height: 300px;
  overflow: hidden;
  position: relative;
}
.yourbg{
  width: 100%; height: auto;
  position: absolute;
  left: -50%;
}
</style>

此处示例http://jsfiddle.net/e4w6stmc/

如何将背景图像的中心与包含div的左侧对齐？

1 个答案: