我使用 CSS 线性渐变作为背景来制作这些条纹，但它们看起来并不那么清晰。无论是在桌面上还是在移动屏幕上

Question

边框在桌面上显得有点像素化，edges/borders 在移动屏幕上不如应有的清晰。我想用它作为一些东西的背景。可以做些什么来解决这个问题？这是我的代码笔的 link -

https://codepen.io/abhishekakade/full/dKVJLR/

body {
  display: inline-block;
  height: 95vh;
  width: 97vw;
  background-repeat: no-repeat;
  background-image: repeating-linear-gradient(
    145deg,
    #333 0%,
    black 30%,
    yellow 30%,
    goldenrod 35%,
    black 35%,
    black 40%,
    yellow 40%,
    goldenrod 60%,
    #000 60%,
    #000 65%,
    yellow 65%,
    goldenrod 70%,
    black 70%,
    #333 100%
  );
}

Answer 1

只需 this.

body {
  display: inline-block;
  height: 95vh;
  width: 97vw;
  background-repeat: no-repeat;
  background-image: repeating-linear-gradient(145deg,
    #333 0%, black 29.9%,
    yellow 30.1%, goldenrod 34.9%,
    black 35.1%, black 39.9%,
    yellow 40.1%, goldenrod 59.9%,
    #000 60.1%, #000 64.9%,
    yellow 65.1%, goldenrod 69.9%,
    black 70.1%, #333 100%
  );
}

我使用 CSS 线性渐变作为背景来制作这些条纹，但它们看起来并不那么清晰。无论是在桌面上还是在移动屏幕上

I did these stripes using CSS linear gradients for background but they don't appear that crisp and clear. Neither on desktop nor on mobile screens

css

linear-gradients