CSS Square背景-图片

Question

我试图仅使用CSS来制作正方形背景，但是我只得到了线条背景，而没有水平线的选择。

这是我的示例代码：

CSS

HashMap<Integer,String> nLevelAliases = [1,2,3];

.container{
    background-color:red;
    width: 400px; height:200px; margin:0 auto;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .5) 95px , transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0) 5px, transparent 100%);
    background-size: 100px  100%;
}

这是我正在寻找的结果

这是我现在得到的结果

Answer 1

答案在“ repeating-linear-gradient（）”中 https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient

.container{
background-color:red;
width: 400px; height:200px; margin:0 auto;
  background-image: 
    repeating-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .25) 95px, red 100px),
    repeating-linear-gradient(0.25turn, rgba(255, 255, 255, .5), rgba(255, 255, 255, .25) 95px, red 100px),
    repeating-linear-gradient(0.75turn, rgba(255, 255, 255, .5), rgba(255, 255, 255, .25) 95px, red 100px);
}

<div class="container">

</div>

Answer 2

您需要的是两个渐变，一个用于定义水平线，另一个用于定义垂直线：

.container {
  background-color: red;
  width: 400px;
  height: 200px;
  margin: 0 auto;
  background:
    repeating-linear-gradient(to right,
        transparent 0,transparent calc(50px - 2px),
        blue calc(50px - 2px),blue 50px),
        
    repeating-linear-gradient(to bottom,
        transparent 0,transparent calc(50px - 2px),
        blue calc(50px - 2px),blue 50px)     
    red;
}

<div class="container">

</div>

上面的示例将创建一个同构网格。您还可以考虑使用多个渐变来单独控制每条线：

.container {
  background-color: red;
  width: 400px;
  height: 200px;
  margin: 0 auto;
  background:
    /*vertical ones*/
    linear-gradient(blue,blue) center/2px 100%,
    linear-gradient(blue,blue) 25% 0/2px 100%,
    linear-gradient(blue,blue) 85% 0/2px 100%,
    /*horizontal ones*/
    linear-gradient(blue,blue) 0 25%/100% 2px,
    linear-gradient(blue,blue) 0 75%/100% 2px,
    
    red;
  background-repeat:no-repeat;
}

<div class="container">

</div>