CSS 方形背景 - 图像

Question

我试图仅使用 CSS 制作一些方形背景，但我只有线条背景，而没有水平线条选项。

这是我的示例代码：

.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%;
}

<div class="container">

</div>

这就是我正在寻找的结果

这是我现在得到的结果

Answer 1

您只需要两个渐变，一个定义水平线，另一个定义垂直线：

.container {
  width: 398px;
  height: 198px;
  margin: 0 auto;
  background:
    repeating-linear-gradient(to right,
        transparent 0  calc(50px - 2px),
        #fff calc(50px - 2px) 50px),
        
    repeating-linear-gradient(to bottom,
        transparent 0 calc(50px - 2px),
        #fff calc(50px - 2px) 50px)     
    red;
}

<div class="container">

</div>

使用 CSS 变量优化：

.container {
  width: 398px;
  height: 198px;
  margin: 0 auto;
  
  --g:transparent 0  calc(50px - 2px),#fff 0 50px; 
  background:
    repeating-linear-gradient(to right, var(--g)),     
    repeating-linear-gradient(to bottom,var(--g))     
    red;
}

<div class="container">

</div>

另一种语法：

.container {
  width: 398px;
  height: 198px;
  margin: 0 auto;
  
  --g:transparent calc(100% - 2px),#fff 0;
  background:
    linear-gradient(to right, var(--g)),
    linear-gradient(to bottom,var(--g)),
    red;
  background-size:
    50px 100%,
    100% 50px;
}

<div class="container">

</div>

如果您想明确定义将根据元素宽度/高度调整的行/列数，您可以执行以下操作：

.container {
  --nr:3; /* number of rows */
  --nc:6; /* number of columns */
  --b:2px; /* border length */

  width: 400px;
  height: 200px;
  margin: 10px auto;

  background:
    repeating-linear-gradient(to right, 
       transparent 0  calc( (100% - var(--b)*(var(--nc) - 1))/var(--nc) ),
       #fff 0 calc((100% - var(--b)*(var(--nc) - 1))/var(--nc) + var(--b))),     
    repeating-linear-gradient(to bottom,
       transparent 0  calc( (100% - var(--b)*(var(--nr) - 1))/var(--nr) ),
       #fff 0 calc((100% - var(--b)*(var(--nr) - 1))/var(--nr) + var(--b)))     
    red;
}

<div class="container">

</div>

<div class="container" style="--nr:4;--nc:8;--b:3px">

</div>

另一种语法：

.container {  
  --nr:3; /* number of rows */
  --nc:6; /* number of columns */
  --b:2px; /* border length */

  width: 400px;
  height: 200px;
  margin: 10px auto;
  
  --g:transparent calc(100% - var(--b)),#fff 0;
  background:
    linear-gradient(to right, var(--g)),
    linear-gradient(to bottom,var(--g)),
    red;
  background-size:
    calc((100% - var(--b)*(var(--nc) - 1))/var(--nc) + var(--b)) 100%,
    100% calc((100% - var(--b)*(var(--nr) - 1))/var(--nr) + var(--b));
}

<div class="container">

</div>
<div class="container" style="--nr:4;--nc:8;--b:3px">

</div>

mask如果您想要透明，您也可以这样做：

.container {  
  --nr:3; /* number of rows */
  --nc:6; /* number of columns */
  --b:2px; /* border length */

  width: 400px;
  height: 200px;
  margin: 10px auto;
  
  --g:#fff calc(100% - var(--b)),transparent 0;
  -webkit-mask:
    linear-gradient(to right, var(--g)),
    linear-gradient(to bottom,var(--g));
  mask:
    linear-gradient(to right, var(--g)),
    linear-gradient(to bottom,var(--g));
  -webkit-mask-size:
    calc((100% - var(--b)*(var(--nc) - 1))/var(--nc) + var(--b)) 100%,
    100% calc((100% - var(--b)*(var(--nr) - 1))/var(--nr) + var(--b));
  mask-size:
    calc((100% - var(--b)*(var(--nc) - 1))/var(--nc) + var(--b)) 100%,
    100% calc((100% - var(--b)*(var(--nr) - 1))/var(--nr) + var(--b));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  background:red;
}

body {
 background:linear-gradient(gray,white);
}

<div class="container">

</div>
<div class="container" style="--nr:4;--nc:8;--b:3px">

</div>

上面的例子将创建一个同构网格。您还可以考虑多个渐变以单独控制每条线并构建自定义网格。

.container {
  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>