具有可编辑颜色的棋盘状背景答案

【问题标题】：Checkboard-like background with editable colors具有可编辑颜色的棋盘状背景
【发布时间】：2018-05-30 12:45:32
【问题描述】：

在我的网页游戏中，我想放置一个棋盘背景。我的第一个想法是创建一个2x2 PNG 图片并使用background-size，这样就可以了。

然后我觉得能够在代码中设置颜色会很不错。我现在所做的是在左上角和右下角使用带有黑色 10% alpha 像素的 PNG，如下所示：

body {
    background-color: #d83;
    background-image: url('../images/background-mask.png');
    background-size: 100px;
    background-position: 25px 25px;
    image-rendering: pixelated;
}

它给了我更多的控制权，因为我可以很容易地改变基色。不过，限制是显而易见的——另一种颜色总是会暗 10%。例如，它不能是完全不同的颜色。

另一个想法是使用一个内部有 4 个矩形的 SVG，但是在这里使用矢量感觉有点尴尬。

data-uri 很可能无法读取，因此我将无法轻松对其进行编辑。

我想避免使用任何 JavaScript 技巧来实现它。它会起作用，但再次 - 感觉很尴尬。

有什么我可以考虑的解决方案吗？唯一的事情是我希望能够轻松定义棋盘的两种颜色。

这是我的背景示例：

【问题讨论】：

标签： html css svg png background-image

【解决方案1】：

我会写下我能想到的最好的 SVG 解决方案。决定您是否认为这足够好。

很遗憾，<pattern> 的所有属性都不是表示属性，因此您无法通过 CSS 设置它们。

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
.one {
  fill: #d1853b;
}
.two {
  fill: #f6d5b4;
}

<body>
  <svg>
    <pattern id="checkered" viewBox="0 0 1 1" patternUnits="userSpaceOnUse"
             x="25" y="25" width="100" height="100">
      <rect class="one" x="0" y="0" width="1" height="1" />
      <path class="two" d="M 0.5,0 V 1 H 0 V 0.5 H 1 V 0 Z" />
    </pattern>
    <rect width="100%" height="100%" style="fill:url(#checkered)" />
  </svg>
</body>

【讨论】：

【解决方案2】：

你可以只使用 css background-color 这样做，只需要 nth-child 属性然后设置 td:hover 属性不需要图像

或者你可以使用 div 来做到这一点：

source

见：

body {
	background: #abdc28;
	padding: 20px;
}

.chessboard {
	margin: 0 auto;
	border-collapse: collapse;
	background: #dd8733;
}
.cell {
    width: 40px; height: 40px;
}
.row{
    display:flex;    
    width: 320px;
    margin: auto;
    border: solid #c77a2e;
    border-width: 0px 1px 0px 1px;}
.row:nth-child(odd) .cell:nth-child(even), .row:nth-child(even) .cell:nth-child(odd) {
	background: #c77a2e;
}
.cell:hover{
   background: green !important;
}
.cell:active {
    background: #0095ff !important;
}

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

【讨论】：

我一点也不喜欢这个主意。使用表格作为背景？不。不过胡子不错:)
@RoboRobok 如果你不喜欢我用过div's 和classes 的表
这不是关于表格，而是关于使用 HTML 元素作为背景。这不是最佳实践，因为它们是交互式的（有点）。另外，我应该在那里放多少个细胞？我需要尽可能多地放置我认为对大多数人来说足够的（技巧）或使用 JavaScript 来计数（技巧）。如果我想使用 JavaScript，无论如何我都会想出更好的解决方案。