1

我已经为镜像对角线背景图案创建了一个解决方案，但错误仅存在于 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>

4

2 回答 2

1

下面的解决方案适用于 Firefox、Edge 和 Chrome，中间没有显示任何垂直线。@temani-afif 的回答在简单性方面非常出色，但垂直线仍然显示在 Firefox 中，尽管不那么明显。然而，我发现虽然background-size: 50.01% 100%hack 在非 Firefox 浏览器中运行良好，但在 Firefox 中运行良好，background-size:50% 100%所以我必须只为 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>

于 2018-12-23T22:13:45.553 回答
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>

于 2018-12-23T21:22:24.100 回答