修复镜像对角线背景图案

Question

我已经为镜像对角线背景图案创建了一个解决方案，但错误仅存在于 Firefox 中，在某些屏幕宽度下，左右定位元素之间会出现一条垂直线。有没有人有解决方案或黑客？唯一的要求是背景是 CSS（没有链接的图像文件）。

.stripes-background {
    width: 50%;
    margin:0 auto;
    padding: 2em;
    position: relative;
    overflow:hidden;
    border-radius:3px;
}

.stripes-diagonal-left {
    background-color: #333333;
    background-image: repeating-linear-gradient(
    25deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px
    );
    position: absolute;
    top: 0;
    width: 50%;
    height: 105%; 
    z-index: -2;
    left: 0;
}

.stripes-diagonal-right {
    background-color: #333333;
    background-image: repeating-linear-gradient(
    25deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px
    );
    position: absolute;
    top: 0;
    width: 50%;
    height: 105%; 
    z-index: -2;
    transform: rotateY(180deg);
    left: 50%;
}

<div class="stripes-background">
    <div class="stripes-diagonal-left" role="presentation"></div>
    <div class="stripes-diagonal-right" role="presentation"></div>
</div>

Answer 1

首先，您可以使用多个背景将所有这些放入一个元素中，并修复小间隙，只需让两个渐变重叠一点即可。

.stripes-background {
    width: 50%;
    margin:0 auto;
    padding: 2em;
    border-radius:3px;
    background: repeating-linear-gradient(
      25deg,
      transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px
    ) left,
    repeating-linear-gradient(
      -25deg,
      transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px
    ) right,
    #333333;
   background-size:50.01% 100%; /*a litte bigger than 50% */
   background-repeat:no-repeat;
    
}

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

为了更好地处理重复渐变，您可以使用 CSS 变量来避免重复代码：

.stripes-background {
    --c:transparent,
      transparent 20px,
      rgba(255, 255, 255, 0.05) 20px,
      rgba(255, 255, 255, 0.05) 40px;
      
    width: 50%;
    margin:0 auto;
    padding: 2em;
    border-radius:3px;
    background: 
     repeating-linear-gradient( 25deg,var(--c)) left,
     repeating-linear-gradient(-25deg,var(--c)) right,
     #333333;
   background-size:50.01% 100%; /*a litte bigger than 50% */
   background-repeat:no-repeat;
    
}

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

Answer 2

下面的解决方案适用于 Firefox、Edge 和 Chrome，中间不会显示任何垂直线。 @temani-afif 的回答在简单性方面非常出色，但垂直线仍然显示在 Firefox 中，尽管不那么明显。但是，我发现虽然 background-size: 50.01% 100% hack 在非 Firefox 浏览器中运行良好，但 background-size:50% 100% 在 Firefox 中运行良好，因此我不得不创建一个特殊的 css 声明，仅适用于 Firefox。我选择 Temani 的答案作为最佳答案，因为没有他的帮助我的答案不可能实现。

.stripes-background {
  --c: transparent, transparent 20px, rgba(255, 255, 255, 0.05) 20px,
    rgba(255, 255, 255, 0.05) 40px;
  width: 50%;
  margin: 0 auto;
  padding: 2em;
  border-radius: 3px;
  background: repeating-linear-gradient(25deg, var(--c)) left,
    repeating-linear-gradient(-25deg, var(--c)) right, #333333;
  /*--non-firefox browsers need hack to remove vertical line--*/
  background-size: 50.01% 100%; /*a litte bigger than 50% */
  background-repeat: no-repeat;
}

/*--firefox needs no hack to remove vertical line--*/
_::-moz-range-track,
body:last-child .stripes-background {
  background-size: 50% 100%;
}

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

修复镜像对角线背景图案

Fix for Mirrored Diagonal Background Pattern

css

background-image

repeating-linear-gradient