html - 如何用 CSS 和 HTML 创建这个 80 年代的背景？

Question

我想问一下如何只用html和CSS创建80个背景？

我已经尝试这样做但得到了这个结果:

 .bottom-background {
        background-size: 100px 100px;
        background-image: linear-gradient(to right, green 2px, transparent 2px), linear-gradient(to bottom, green 2px, transparent 2px);
        width: 100%;
        height: 50vh;
        bottom: 0;
        position: absolute;
        perspective: 20px;
        transform: rotateX(45deg);
    }

<div class="bottom-background"></div>

我希望所有图片都像第一张图片一样居中。

Answer 1

你需要组合转换来获得这种效果，我使用了:

transform: perspective(400px) rotateX(70deg) scale(2);

perspective() 变换仅在与另一个变换结合时才有效，在本例中为 rotateX()。 scale() 变换是为了确保整个变换后的图形充满屏幕。我调整了边框渐变以补偿双倍比例。

body { margin: 0; }

.perspective-container {
  overflow: hidden; /* so we dont get any undesired scrolling in the browser window */
}

.bottom-background {
  background-size: 20px 20px;
  background-image: linear-gradient(to right, green 1px, transparent 1px), linear-gradient(to bottom, green 1px, transparent 1px);
  width: 100%;
  height: 50vh;
  bottom: 0;
  position: absolute;
  
  transform: perspective(400px) rotateX(70deg) scale(2);
}

<div class="perspective-container">
  <div class="bottom-background"></div>
</div>