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

答案在"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

你只需要一个conic-gradient:

.container {
  width: 398px;
  height: 198px;
  margin: 0 auto;
  background:
    conic-gradient(from 90deg at 2px 2px,
      red 90deg,#0000 0) -2px -2px/50px 50px;
}

<div class="container">

</div>

如果您想明确定义将根据元素 width/height 进行调整的 row/column 的数量，您可以执行以下操作：

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

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

  background:
    conic-gradient(from 90deg at var(--b) var(--b),
      red 90deg,#0000 0) calc(-1*var(--b)) calc(-1*var(--b))/
      calc(100%/var(--nc)) calc(100%/var(--nr));
}

<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;
  
  --m:
    conic-gradient(from 90deg at var(--b) var(--b),
      red 90deg,#0000 0) calc(-1*var(--b)) calc(-1*var(--b))/
      calc(100%/var(--nc)) calc(100%/var(--nr));
  -webkit-mask:var(--m);
          mask:var(--m);
          
  background:linear-gradient(135deg,red,blue);
}

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>

CSS 方形背景 - 图片

CSS Square background - image

html

css

background-image

linear-gradients

repeating-linear-gradient