Question

我发现这个代码可以像棋盘一样呈现。

＆＃13;

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

＆＃13;

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

＆＃13;

如果我将背景位置更改为background-position: 0 0, 50% 50%;，则第二个背景图像不会像之前一样显示，结果会中断。

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

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

Answer 1

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

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

Fiddle demo, which scale using viewport units vw

Stack snippet

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

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

1 个答案: