在这种情况下如何正确使用背景位置百分比？

Question

我正要在这个上拔头发。

我有一个由不同的divs 组成的水平条。它们的宽度由总条带宽度的百分比定义（未知）

例如：

---------------------------------
|     |     |            |      |
---------------------------------
0%   20%   40%          80%    100%

现在我想要一个基本上跨越整个条带的背景图像，但我必须在每个 div 上单独定义它们，因为它们可能会根据它是哪个 div 有不同的变化。

所以第一个 div (0% - 20%) 将有一个 background-width 的 500% 和一个 (0, 0) 的 background-position

第二个 (20% - 40%) 也将有一个 background-width 的 500% 和一个 (25%, 0) 的 background-position（稍后会详细介绍）

​​>

第三个 (40% - 80%) 将具有 background-width 的 250% 和 background-position (~66.66%, 0)

最后一个 (80%-100%) 将再次具有 background-width 的 500% 和 background-position 的 (100%, 0)

现在这听起来可能是一个非常愚蠢的问题，但我无法理解如何根据条带上的 div 宽度和位置计算 background-positions 的正确值，尽管我认为我大致了解百分比定位的工作原理。我非常感谢有人指出我正确的方向。

编辑：经过一些涂鸦后，我想我想通了，但我还没有将其作为答案发布，因为我的大脑太油腻了，甚至无法理解其背后的原因。也许有人会花时间解释为什么会这样。我肯定会在睡一觉后尝试。我可以像这样计算正确的值：

background_position_x = div_strip_position_x + div_width * div_strip_position_x / (100 - div_width)

（所有变量均以百分比表示）

Answer 1

当你在背景位置使用百分比时：

背景定位区域的大小减去背景图片的大小； size 是指水平偏移的宽度和垂直偏移的高度

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

.container {
  position: relative;
  display: block;
  width: 100%;
  font-size: 0;
}

.container>div {
  display: inline-block;
  height: 200px;
  background-repeat: no-repeat;
}

.container#example1>div {
  width: 50%;
  background-size: 200% 100%;
}

.container#example2>div {
  width: 33.33%;
  background-size: 300% 100%;
}

.container#example3>div {
  width: 25%;
  background-size: 400% 100%;
}

#example1 #d1 {
  background-image: url(http://placehold.it/500x400/333333/000000);
  background-position: 0% 0;
}

#example1 #d2 {
  background-image: url(http://placehold.it/500x400/666666/000000);
  background-position: 100% 0;
}

#example2 #d1 {
  background-image: url(http://placehold.it/50x400/333333/000000);
  background-position: 0% 0;
}

#example2 #d2 {
  background-image: url(http://placehold.it/50x400/666666/000000);
  background-position: 50% 0;
}

#example2 #d3 {
  background-image: url(http://placehold.it/50x400/999999/000000);
  background-position: 100% 0;
}

#example3 #d1 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 0% 0;
}

#example3 #d2 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 33.33% 0;
}

#example3 #d3 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 66.66% 0;
}

#example3 #d4 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 100% 0;
}

<div id="example1" class="container">
  <div id="d1"></div>
  <div id="d2"></div>
</div>

<hr>

<div id="example2" class="container">
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</div>

<hr>

<div id="example3" class="container">
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
  <div id="d4"></div>
</div>

让我们看看例子3。

确定每个段用于background-position 的“最简单”方法是...

100% / (segmentID * (numberOfSegments -1))

所以在这种情况下，我们需要 total 4 个细分。

1. 100% / (0 * (4-1)) == 0%
2. 100% / (1 * (4-1)) == 33.33%
3. 100% / (2 * (4-1)) == 66.66%
4. 100% / (3 * (4-1)) == 100%

请注意，这仅适用于background-size: width == numberOfSegments * 100%。

Answer 2

据我了解，背景定位是相对于 div 本身，而不是它的父容器。因此，如果要偏移它，您可能必须使用 0 表示 X 或负值，以便图像最终位于父级的 X=0 坐标处。请记住，box-sizing 会影响值。

根据您的项目，您还可以使用 CSS3 的 calc 函数或 JavaScript/jQuery 解决方案。

以下是我发现的一些可能对您有所帮助的链接：

• Is there a way to position a background image relative to the centre of an element?
• Offset a background image from the right using CSS
• http://blog.vjeux.com/2012/image/css-understanding-percentage-background-position.html

这里是an MDN article 了解更多信息。

Answer 3

1- 将它们包装在父 div 中。 2-使他们的显示“内联块”和垂直对齐“中间”。 3-将背景图像应用于所有。 4-分别设置每个的背景大小和位置。

.row-1{
  display:block;
  font-size:0;
}
.row-1 > div{
text-align:center;
height:20px;
display:inline-block;
vertical-align:middle;
background: url('http://www.imagestowallpapers.com/wp-content/uploads/2015/12/Background-Image-CSS4.jpg') no-repeat center center fixed;
    background-size: cover;
}
.w20{
   width:20%;
   background-color:red;
   font-size:13px
}
.w40{
   width:40%;
   font-size:13px;
}
.w20.first{
    background-position:0 0;
    background-size: 500%;
}
.w20.second{
   background-position:25% 0;
   background-size: 500%;
}
.w20.third{
   background-position:66.66% 0;
   background-size: 250%;
}
.w20.forth{
   background-position:100% 0;
   background-size: 500%;
}

<div class="row-1">
  <div class="w20 first">1</div>
  <div class="w20 second">2</div>
  <div class="w40 third">3</div>
  <div class="w20 forth">4</div>
</div>