CSS Square background - image

问题

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

This is my example code:

.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

回答1:

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>

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>

Another syntax:

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

Another syntax:

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

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>

回答2:

The answer is in "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>

来源：https://stackoverflow.com/questions/53425836/css-square-background-image

标签

html

css

background-image

linear-gradients

repeating-linear-gradient