HTML 中的图像在分区外保持垂直堆叠

Question

我正在尝试创建一个随分区大小缩放的背景图像。我使用的图像需要在 3X3 网格中布置，角的大小保持固定，其他部分扩展以适合分区。

但是，当我尝试放置图像时，它们都保持垂直堆叠，而不是相对于它们所在的分区。

测试图应该是四角为蓝色，边缘为红色，中间为橙色。

body {
  background-color:black
}
#test > #Background_UL {
  background-color: powderblue;
  background-size: 40px 40px;
  height: 40px;
  width: 40px;
  position: relative;
}
   
#test > #Background_ML {
  background-color: red;
  background-size: 100% 100%;
  height: calc(100% - 80px);
  width: 40px;
  position: relative;
}
    
#test > #Background_LL {
  background-color: powderblue;
  background-size: 40px 40px;
  height: 40px;
  width: 40px;
  position: relative;
}
   
#test > #Background_UM {
  background-color: red;
  background-size: 100% 100%;
  height: 40px;
  width: calc(100% - 80px);
  top: 0;
  position: relative;
  left: 40px;
}
    
#test > #Background_MM {
  background-color: orange;
  background-size: 100% 100%;
  height: calc(100% - 80px);
  width: calc(100% - 80px);
  top: 40px;
  position: relative;
  left: 40px;
}
    
#test > #Background_LM {
  background-color: red;
  background-size: 100% 100%;
  height: 40px;
  width: calc(100% - 80px);
  bottom: 0;
  position: relative;
  left: 40px;
}
    
#test > #Background_UR {
  background-color: powderblue;
  background-size: 40px 40px;
  height: 40px;
  width: 40px;
  position: relative;
  right: 40px;
}
    
#test > #Background_MR {
  background-color: red;
  background-size: 100% 100%;
  height: calc(100% - 80px);
  width: 40px;
  position: relative;
  right: 40px;
}
    
#test > #Background_LR {
  background-color: powderblue;
  background-size: 40px 40px;
  height: 40px;
  width: 40px;
  position: relative;
  right: 40px;
}

<div id="test" style="width:400px;height:400px;">
  <div id="Background_UL"></div>
  <div id="Background_ML"></div>
  <div id="Background_LL"></div>
  <div id="Background_UM"></div>
  <div id="Background_MM"></div>
  <div id="Background_LM"></div>
  <div id="Background_UR"></div>
  <div id="Background_MR"></div>
  <div id="Background_LR"></div>
</div>

Example

Answer 1

您可以很容易地在容器上使用 display: grid; 并指定 grid-template-columns 和 grid-template-columns 来实现这一点，并且需要的代码要少得多。您还需要重新组织您的 div，以便从左到右然后向下移动。我添加的重要代码是这样的：

#test {
  display: grid;
  grid-template-columns: 40px auto 40px;
  grid-template-rows: 40px auto 40px;
}

请看我为你做的这个例子：

body {
  background-color:black
}
#test > #Background_UL {
  background-color: powderblue;
}
   
#test > #Background_ML {
  background-color: red;
}
    
#test > #Background_LL {
  background-color: powderblue;
}
   
#test > #Background_UM {
  background-color: red;
}
    
#test > #Background_MM {
  background-color: orange;
}
    
#test > #Background_LM {
  background-color: red;
}
    
#test > #Background_UR {
  background-color: powderblue;

}
    
#test > #Background_MR {
  background-color: red;

}
    
#test > #Background_LR {
  background-color: powderblue;
}

#test {
  display: grid;
  grid-template-columns: 40px auto 40px;
  grid-template-rows: 40px auto 40px;
}

<div id="test" style="width:400px;height:400px;">
  <div id="Background_UL"></div>
  <div id="Background_UM"></div>
  <div id="Background_UR"></div>
  <div id="Background_ML"></div>
  <div id="Background_MM"></div>
  <div id="Background_MR"></div>
  <div id="Background_LL"></div>
  <div id="Background_LM"></div>
  <div id="Background_LR"></div>
</div>

HTML 中的图像在分区外保持垂直堆叠

Images in HTML keep stacking vertically outside of division

html

css

formatting

position

css-position