时间戳

首页 > 解决方案 > 这个简单的 CSS 和 html 国际象棋布局有什么问题？（短代码）

html - 这个简单的 CSS 和 html 国际象棋布局有什么问题？（短代码）

问题描述

我正在制作一个棋盘，我的主要问题是在我设置了棋盘的前两行之后，典当的插入会改变深色方块的颜色。

所以棋盘具有“main”类并且颜色为白色，正方形（class =“box）的颜色与棋盘相同（白色）或棕色。组件（pawn）是一个 SVG。添加 pawn ID 后到一个正方形，它会使正方形的颜色无效。这对于白色正方形很好，但对于棕色正方形是个问题。

这是代码

body {
  background-color: grey;
}

.main {
  height: 50%;
  width: 70%;
  margin: 10% 15%;
  background: white;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.box {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.box:nth-child(even) {
  background: burlywood;
}

#pawn {
  background: url(https://svgsilh.com/svg/3413417.svg) center;
  background-size: cover;
}
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>

  <div class="main">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
  </div>
</body>

</html>

标签： htmlcsschess

解决方案

如果你想让高度和宽度 % 起作用，你应该给它的父级一个高度和宽度，因为这就是它们将作为 100% 的值。在这种情况下，您在 main 中有 % 但在 body 标签中没有说明宽度或高度。

在这种情况下，您不能使用那些 % 所以我使用静态 px 以便更快地完成它并且不重新构建 html。

背景的问题是，当您添加图像作为背景时，它会覆盖以前的背景，因此为了获得具有样式背景的透明图像，您必须将其添加为容器的内容（img）背景。

我还更改了主标签的主类并替换了 id pawn，因为您不应该有多个具有相同 id 的标签，换句话说，它应该是唯一的，如果您想使用更多，请使用一个类。

body {
  background-color: grey;
  width: 100vw;
  height: 100vh;
}

main {
  height: 100px;
  width: 450px;
  margin: 10% 15%;
  background: white;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.box {
  height: 48px;
  width: 48px;
  border: 1px solid black;
}

.box:nth-child(even) {
  background: burlywood;
}

img{
width:100%;
height:100%;
}
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>

  <main>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
  </main>
</body>

</html>

推荐阅读