使用线性渐变＆:: before :: after在css中创建的背景图像不会随网页扩展

问题描述 投票：1回答：2

我有一个页面（在codepen中）使用css创建灰色方块的背景。该页面允许创建一个表（网格），您可以单击该表并更改颜色以生成图像。我遇到的问题是，当创建一个表格导致页面超出窗口大小（向上滚动条出现）时，背景图像不会以实物形式展开。我一直试图找到解决方案，但我似乎无法克服这个问题。这可以在CSS中完成吗？

这是我的codepen的链接：CondPen with code（The Pen已应用修复）

.squares-bg::before, .squares-bg::after {
content: "";
width: 100%;
height: 3500px;    *<-- fix was to change height to 100%, in body too*
position: absolute;*<--   and to change this to fixed*
top: 0;
left: 0;
pointer-events: none;
z-index: -1;

}

如果我设置高度：3500px in .squares-bg :: before，.squares-bg ::之后它有点工作，但我希望有一个动态解决方案。高度设置为100％，因为我认为它会随着窗口的增长而填充，但这种情况不会发生。将笔中的值更改为100％并创建一个类似于60 x 60的网格，然后向下滚动。背景不延伸。

html css
2个回答
1
投票

看起来你忘了为position: relative设置.squares-bg

html,
body {
  margin: 0;
  padding: 0;
  height: 3000px;
  width: 100%;
}

.squares-bg {
  width: 100%;
  height: 3000px;
  color: white;
  position: relative;
  padding-top: 0.5em;
}

.squares-bg::before,
.squares-bg::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.squares-bg::before {
  background-image: linear-gradient(black 50%, transparent 50%), linear-gradient(to right, grey 50%, black 50%);
  background-size: 30px 30px;
}

.squares-bg::after {
  background-image: linear-gradient(black, transparent);
  height: 100%;
}

body {
  text-align: center;
}

h1 {
  font-family: "Press Start 2P", cursive;
  font-size: 50px;
  color: dimgrey;
  text-shadow: 3px 3px 5px red;
  margin: 0.5em;
}

h2 {
  margin: 0.5em 0 0.5em;
}

h2:nth-of-type(2) {
  display: inline;
}

table,
tr,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  background-color: white;
  margin: 0 auto;
  box-shadow: 2px 2px 4px red;
}

tr {
  height: 20px;
}

td {
  width: 20px;
}

input[type="number"] {
  width: 6em;
  margin: 0 0.25em 1em;
}

input[type="color"] {
  margin: 0 0.5em;
}
<body class="squares-bg">
  <h1>Lab: Pixel Art Maker</h1>

  <h2>Choose Grid Size</h2>
  <form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="15"> Grid Width:
    <input type="number" id="inputWidth" name="width" min="1" value="15">
    <input type="submit" value="New Grid">
  </form>

  <h2>Pick A Color</h2>
  <input type="color" id="colorPicker" value="#ff0000">

  <h2>Design Canvas</h2>
  <table id="pixelCanvas"></table>
</body>
0
投票

解决方法是调整css去除位置：.squares-bg并设置位置：到固定位置：固定;在.squares-bg :: before，.squares-bg :: after然后将.squares-bg和body中的高度设置为100％height：100％;

约瑟夫·伍尔弗（JOEY）与Google奖学金一起成长：前端网络开发队员与我一起提供了解决方案。谢谢JOEY！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.