逻辑(css)-背景网格制作(linear-gradient)

乖女子@@@

已于 2023-10-27 17:06:17 修改

阅读量1.1k

点赞数 1

分类专栏： css 文章标签： css 前端

于 2023-07-13 17:53:00 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/131702125

版权

linear-gradient

渐变

语法：linear-gradient([direction], color-stop1, color-stop2, ...)
第一个参数为(可选)方向参数，可以是度数也可以是方位名词,方向与读书的关系如下：
在这里插入图片描述

角度	方位	文字说明
0deg	to top	从下往上渲染
90deg	to right	从左往右渲染
180deg	to bottom	从上往下渲染
270deg	to left	从右往左渲染

百分比渐变

通过 linear-gradient(0deg, color1, color2)进行渲染是默认从下往上开始渲染 color1与color2占比相同；

若是渐变过程中颜色占比不相同，可以进行设置
linear-gradient(0deg, color1 占比1, color2 占比2)

// 从下往上开始渲染 黑色占比80% 白色占比20%

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

乖女子@@@

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS3中用linear-gradient绘制网格背景

Han_minxing的博客

08-12

3146

利用CSS3的linear-gradient 画网格背景

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

AsheAndWine的博客

01-15

8463

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

参与评论您还未登录，请先登录后发表或查看评论

1. CSS Grid 网格布局教程

最新发布

qq_36081714的博客

07-08

1136

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是。

用纯 CSS 实现网格背景

太空编程

11-29

1318

是不是在日常开发中经常遇到实现网格的需求，网格通常对网页中展示的元素能起到很好的定位和对齐作用。这里介绍如何只通过 CSS 来实现这个需求？使用背景图这里我们的背景图使用 SVG 来创建，首先，创建绘出一个正方形，填充白色；然后通过矩形实现垂直和水平的线条，进而分别对它们进行定位居中。<svgxmlns='http://www.w3.org/2000/svg'width='40'hei...

css绘制网格背景

李卓书

06-21

3450

本篇文章主要简单扼要的去实现css网格背景，并进一步探求其应用原理。

【CSS】网格背景

点滴记忆

07-27

1262

background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0); background-size: 20px 20px; background-posi...

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

L_sixmoon的博客

07-01

659

background: -webkit-linear-gradient(top, transparent 40px, yellow 41px); 该css属性值的意思可以解释为：top：从上到下开始，0~40px处为transparent透明，从41px开始背景颜色为yellow，因为 .box 的背景颜色是orange，故透明的时候即仍然是orange色。...

CSS学习笔记之可重复渐变（repeating-linear-gradient）

09-27

总结来说，`repeating-linear-gradient`是CSS中一个强大的工具，它允许开发者创建丰富的背景图案和动态效果，同时具有良好的浏览器兼容性。通过灵活地调整颜色、角度和位置，可以创造出无数独特的设计。在实际项目中...

css线性渐变linear-gradient 参数讲解以及示例

柠檬的博客

08-01

7443

css线性渐变linear-gradient参数详解以及一些示例

css网格背景样式

fyydashen的博客

05-31

376

css网格背景样式

grid-background:生成自定义CSS网格背景

03-15

生成自定义CSS网格背景

CSS3 经典教程系列：CSS3 线性渐变（linear-gradient）

weixin_33845477的博客

02-17

1330

　　《CSS3 经典教程系列》的前一篇文章向大家详细介绍了 text-shadow 文本阴影特性的用法，今天这篇文章我们在一起来看看 CSS3 中实现渐变效果的 Gradient 属性的具体用法。在以前，渐变效果和阴影、圆角效果一样都是做成图片，直接编写 CSS 代码就可以实现。您可能感兴趣的相关文章 Web 开发人员和设计师必读文章推荐 20个非常绚丽的 CSS3 特性应用...

css 背景设置成网格样式

FrozenNoodle的博客

04-27

896

/* 水平条纹 */ background: -webkit-linear-gradient(top, transparent 1px, #F0F0F0 1px, #cdcdcd 2px, transparent 2px, transparent 69px, #F0F0F0 60px), /* 垂直条纹 */ -webkit-linear-gradient(left, transparent 1px, #F0F0F0 1px...

css网页网格线条背景

ICode联盟

05-30

292

下载地址 css代码实现的网页背景为网格线条样式。 dd:

运用css的线性渐变画网格背景图

lt_1111的博客

08-28

1028

先上效果图 body{ background-color:#fff; background-image: linear-gradient(transparent,transparent 50%,rgba(55,110,176,0.3) 50%), linear-gradient(to right,transparent,transparent 50%,rgba(55,110,176,0.3) 50%); background-size:40p

CSS实现背景网格线（background-image）

littleOneYuan的博客

07-20

3788

CSS实现背景网格线（background-image）

2021-12-07 css网格背景的写法

Janfiveee_的博客

12-07

197

如果想背景的网格大小统一，不被拉伸，不变形，建议自己css手写，不要让ui出图写法： box-shadow: 0 0 0 10px #5E89FF; background: -webkit-linear-gradient(top, transparent 47px, rgba(255, 255, 255, .08) 48px), -webkit-linear-gradient(left, transparent 47px, rgba(255, 255, 255, .08) 48px); .

CSS3画网格

01-17

3256

CSS3画网格需要用到的属性就是——linear-gradient、background-size，大家鼓掌欢迎他们～那到底要怎么做呢？我们暂时不考虑网格，先想想，怎么画一条横线呢？好，看下面的代码（只贴了webkit的实现，其他的太多，不想写，下同～ Css 1 2 3 4 .grid{ ba

css3 绘制网格背景

06-03

CSS3可以使用`background-image`和`linear-gradient`属性来绘制网格背景。以下是绘制网格背景的基本步骤： 1. 创建一个包含网格的容器： ``` <div class="grid-container"> ... </div> ``` 2. 使用`background-image`属性设置背景图片为渐变色： ``` .grid-container { background-image: linear-gradient(to right, transparent 50%, #ccc 50%, #ccc), linear-gradient(to bottom, transparent 50%, #ccc 50%, #ccc); } ``` 上述代码中，使用了两个渐变色来绘制水平和垂直的网格线。其中，`to right`和`to bottom`参数分别表示渐变色的方向。`transparent 50%, #ccc 50%`表示将渐变色从透明到灰色分为两个部分，中间使用了一个50%的位置来实现网格线的效果。 3. 使用`background-size`属性设置背景图片的大小： ``` .grid-container { background-image: linear-gradient(to right, transparent 50%, #ccc 50%, #ccc), linear-gradient(to bottom, transparent 50%, #ccc 50%, #ccc); background-size: 20px 20px; } ``` 上述代码中，将背景图片的大小设置为20px * 20px，即每个网格的大小。 4. 可以使用`background-color`属性设置网格的颜色和样式： ``` .grid-container { background-image: linear-gradient(to right, transparent 50%, #ccc 50%, #ccc), linear-gradient(to bottom, transparent 50%, #ccc 50%, #ccc); background-size: 20px 20px; background-color: #fff; border: 1px solid #ccc; } ``` 上述代码中，使用`background-color`属性设置网格的背景颜色为白色，使用`border`属性设置网格的边框为1px的灰色实线。以上是绘制网格背景的基本步骤，需要注意的是，绘制网格背景需要使用渐变色，因此可能在一些老旧的浏览器中存在兼容性问题。