代码之家 › 专栏 › 技术社区 › 24sharon

CSS方形背景-图像

repeating-linear-gradient linear-gradients background-image css html

24sharon · 技术社区 · 7 年前

这是我的示例代码:

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

这就是我想要的结果

这是我现在得到的结果

2 回复 | 直到 6 年前

Temani Afif 6 年前

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

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

另一种语法:

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

<
</部门>

.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 class=“container”style=“--nr:4--nc:8--b:3px“>

</部门>

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

</部门>

Carol McKay 7 年前

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>