CSS Square背景-图片 [英] CSS Square background - image

问题描述

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

I tried to make some square background using CSS only, but i got just line background without the option of horizontal lines.

这是我的示例代码:

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

这是我正在寻找的结果

And this is the result that I am looking for

这是我现在得到的结果

This is the result that I got for now

推荐答案

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

All you need is two gradients, one to define the horizontal lines and the other the vertical ones:

.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变量进行了优化:

Optimized with CSS variables:

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

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

In case you want to explicitly define the number of row/column that will adjust based on the element width/height you can do like below:

.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 进行操作:

You can also do it with mask in case you want to have transparency:

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

以上示例将创建一个同构网格.您还可以考虑使用多个渐变，以便单独控制每条线并构建自定义网格.

The above examples will create an homogeneous grid. You can also consider multiple gradient in order to control each line alone and build a custom grid.

.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 Square背景-图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！