使用百分比时，多个图像的背景位置无法按预期工作答案

【问题标题】：background-position for multiple images does not work as expected when using percentages使用百分比时，多个图像的背景位置无法按预期工作
【发布时间】：2017-06-22 18:30:41
【问题描述】：

我发现这段代码可以像棋盘一样渲染。

.chessboard {
  width: 100px;
  height: 100px;
  
  background-color: white;
  background-image: 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
  background-size:100% 100%;
  background-position: 0 0, 50px 50px;
}

&lt;div class="chessboard"&gt;&lt;/div&gt;

如果我将背景位置更改为background-position: 0 0, 50% 50%;，第二个背景图像不会像以前那样出现，结果会被破坏。

有人可以向我解释一下，并为此提供解决方案吗？

我需要在这里使用百分比而不是固定长度，因为我需要每个 div 恰好四个正方形，并且 div 大小不固定。

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/background-position: “百分比是指背景定位区域的大小减去背景图像的大小” 渐变没有“图像大小”，所以有这里没有任何可用的东西，您可以首先计算百分比。
你需要什么类型的输出
@Bhargav：我需要与原始版本相同的输出（背景位置：0 0, 50px 50px;），但是，我需要动态样式，因为我有不同大小的 div。跨度>
但是在上面的代码中你得到了输出
@Bhargav：问题是，我当前的 div 是 100px x 100px，如果我有另一个不同大小的 div，那么我必须将 50px 更改为新 div 的一半宽度/高度。那么css样式就不是动态的了。

标签： html css

【解决方案1】：

如果使用background-image，this post 显示使用百分比的背景位置如何工作。

这是一个更简单的解决方案，使用伪元素

Fiddle demo, which scale using viewport units vw

堆栈sn-p

.chessboard {
  position: relative;
  width: 100px;
  height: 100px;  
  background-color: white;
}
.chessboard::before, .chessboard::after {
  content:  '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 50%;  
  background-color: black;
}
.chessboard::after {
  left: 0;
  top: 50%;
}

/* styling for this demo only */
.chessboard {
  display: inline-block;
  vertical-align: top;
  border: 1px solid lightgray;
}
.chessboard.bigger {
  width: 150px;
  height: 150px;  
}

<div class="chessboard"></div>

<div class="chessboard bigger"></div>

【讨论】：