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中可以完美地工作，所以我不得不为Firefox创建一个特殊的css声明。我选择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>

修复镜像对角背景图案

2 个答案: