CSS之linear-gradiend ——实现网格背景效果


要实现效果图:

        

   

第一步:从上到下画直线。

第二步:从左到右画直线。

其中body代码:


	

css代码:

即设置div.box的背景颜色为orange,再设置其内部div的linear-gradient的css属性值。实现网格效果。

下面更改 .one 的 linear-gradient 属性值一步步分析(.one 的height属性值不变):

方法一:

第一步:从上到下画直线。

当 .one 的 linear-gradientcss样式为

background: -webkit-linear-gradient(top, transparent 40px, yellow 41px);

的时候。    

 

效果图:     

   

该css属性值的意思可以解释为:top:从上到下开始,0~40px处为transparent透明,从41px开始背景颜色为yellow,因为 .box 的背景颜色是orange,故透明的时候即仍然是orange色。就形成了上边的效果图。

若想实现一条直线效果。那么我们可以让前边40px透明后,再让41px之后的42px开始也变成透明。即只设置41px的时候背景颜色yellow。在41px处形成一条1px的黄色直线。

此时可以使用background-size属性。background-size 属性规定背景图片的大小。


当 .one 的 linear-gradientcss样式为

background: -webkit-linear-gradient(top, transparent 40px, yellow 41px);

background-size: 41px 41px;

background-repeat: no-repeat;

的时候。     

效果图:     



即规定背景图像的宽高为41px的尺寸。即规定背景图片的大小在宽度和高度为41px为止的时候借宿。那么yellow背景色将只留在41px处,之后的yellow背景色都不再存在。

为了便于观察我们刚刚将背景设为不平铺,而linear-gradient默认平铺,此时再将background-repeat属性去掉,效果图将变为:



可以发现刚刚不平铺的时候只有下边有1px的黄线,右边没有。那是因为设置的linear-gradient属性值是从上到下的。现在开始画从左到右的竖线。即加一个从左到右的linear-gradient属性值。

第二步:从左到右画直线。

当 .one 的 linear-gradientcss样式为

background: -webkit-linear-gradient(top, transparent 40px, yellow 41px),-webkit-linear-gradient(left, transparent 40px, yellow 41px);

 background-size: 41px 41px;


的时候。网格效果就实现了。

该css 意思为:从上边开始,0~40px 之间为透明,到40px结束后为止起始背景颜色是yellow,当到达41px的时候结束,(即yellow部分宽度仅为1px)。

从左边边开始,0~40px 之间为透明,到40px结束后为止起始背景颜色是yellow,当到达41px的时候结束。

最后以宽度41px,告诉41px 分割背景图。默认.one的div背景平铺。

如果想让直线宽度变宽。可以更改 background-size的属性值。最低41px,低于41px直线消失,41px递增,直线宽度递增。

如果想让改变网格大小。可以更改transparent 后边的值和yellow 后边的值。如将 “transparent 40px” 改为 “transparent 30px“,将 “yellow 41px” 改为 “yellow 31px“,同时将 background-size 属性值改为宽高31px。


网格变小的效果图:


如想让间隔变大可以再更改background-size 的属性值。


如果想让网格横竖线颜色不一。则从上到下和从左到右的颜色值可以更改。

如该案例css样式为:

效果图:


方法二:

 .one 的 css样式为:

height: inherit;
    background: linear-gradient(90deg,rgba(14,49,63,.5) 3%,transparent 0),
          linear-gradient(rgba(14,49,63,.5) 3%,transparent 0);
    background-size: 40px 40px; 

效果图:

  

对于linear-gradient(90deg,rgba(14,49,63,.5) 3%,transparent 0), 属性值意思可以解释为:90deg意为从左往右,容器前3%的宽度的背景颜色为rgb(14,49,63)。透明度
为0.5。3%之后开始都是透明transparent。而
linear-gradient 的默认渐变方向为从上到下。

对于linear-gradient(rgba(14,49,63,.5) 3%,transparent 0); 第一个参数留空不写即表示从上到下,容器前3%的宽度的背景颜色为rgb(14,49,63)。透明度为0.5。3%之后开始都是透明transparent。

如果想让细线变宽,则可以增大颜色值 rgb(14,49,63) 的百分比。
如果想让细线透明度增加,则可以更改 (rgba(14,49,63,.5) 中的最后一个参数的值。(opacity属性)
如果想让网格大小缩小或者放大,则可以更改 background-size: 40px 40px 的属性值。

如将细线变宽且没有透明度。我们可以将3%改为10%,(rgba(14,49,63,.5) 改为 (rgba(14,49,63,1),且网格大小改为宽高30px。

即 .one 中 如下linear-gradient 的 css:

background: linear-gradient(90deg,rgba(14,49,63,1) 10%,transparent 0),linear-gradient(rgba(14,49,63,1) 10%,transparent 0);
 background-size: 30px 30px;


效果图:
           

同样如果想让网格横竖线颜色不一。则从上到下和从左到右的颜色值可以更改。

如该案例css样式为:


效果图: