Question

我要把头发拉出来。

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

例如：

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

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

所以第一个div（0％ - 20％）的background-width 500%和background-position的（0,0）

第二个（20％ - 40％）也会有background-width 500%和background-position（25％，0）（稍后会详细介绍）

第三个（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>

让我们看看example3。

“最简单”的方法是确定每个细分受众群background-position的用途是......

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

因此，在这种情况下，我们需要4个总段。

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

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

Answer 2

据我所知，背景定位是相对于div本身而不是其父容器。因此，如果要对其进行偏移，则可能必须使用0作为X或负值，以便图像最终位于父级的X = 0坐标处。请注意，box-sizing会影响值。

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

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

以下是an MDN article以获取更多信息。

Answer 3

1-将它们包裹在父div中。 2-制作他们的显示器＆＃34; inline-block＆＃34;和垂直对齐＆＃34;中＆＃34;。 3-将背景图像应用于所有人。 4-分别设置每个背景大小和位置。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: