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

最新推荐文章于 2024-05-09 20:59:01 发布

Ashe And Wine

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量8.2k

点赞数 6

分类专栏： web前端文章标签： linear-gradient HTML

本文链接：https://blog.csdn.net/AsheAndWine/article/details/79044407

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

要实现效果图：

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

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

其中body代码：

<body>
	<div class="box">
		<div class="one"></div>
	</div>
</body>

css代码：

<style>
.box{
	width: 250px;
	height: 130px;
	background-color: orange;
}
.one{
    height: inherit; /* 继承.box高度 */
    background: -webkit-linear-gradient(top, transparent 40px, yellow 41px),-webkit-linear-gradient(left, transparent 40px, yellow 41px);
    background-size: 41px 41px;

}
</style>

即设置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样式为：

<style>
.box{
	width: 250px;
	height: 130px;
	background-color: #FEFAE1;
}
.one{
       height: inherit;
       background: -webkit-linear-gradient(top, transparent 40px, #9C255D 41px),-webkit-linear-gradient(left, transparent 40px, #F6931E 41px);
        background-size: 41px 41px;   
}


</style>

效果图：

方法二：

.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样式为：

<style>
.box{
	width: 250px;
	height: 130px;
	background-color: #9C255D;
}
.one{
     height: inherit;
     background: linear-gradient(90deg,rgba(246,147,30,.5) 20%,transparent 0),linear-gradient(rgba(255,249,225,.5) 20%,transparent 0);
     background-size: 40px 40px;    

}
</style>

效果图：

Ashe And Wine

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS之linear-gradiend ——实现网格背景效果

要实现效果图：第一步：从上到下画直线。第二步：从左到右画直线。其中body代码： css代码：.box{ width: 250px; height: 130px; background-color: orange;}.one{ height: inherit; /* 继承.b
复制链接

扫一扫