【CSS】网格背景

最新推荐文章于 2024-05-31 10:22:26 发布

木子欢儿

最新推荐文章于 2024-05-31 10:22:26 发布

阅读量1.2k

点赞数 2

文章标签： css css3 html 前端 javascript

本文链接：https://blog.csdn.net/muzihuaner/article/details/126012351

版权

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-position: 50%;
    background-repeat: repeat;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木子欢儿

关注关注

2
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

如何只用 CSS 制作网格？

偶尔记一下 - mybatis.io

09-24

1289

在看这篇文章时，对其中的网格比较好奇，作者提供了 stackoverflow 的链接，就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较喜欢的样式，贴在下面展示。

vue+css网格背景图制作

weixin_46353030的博客

02-24

919

环境 win10 vscode vue2.x 代码改变网格与网格之间的间距：同时调整transparent和background-size，数值越小，网格之间的间距越小； rgba后的数值用于调整网格线的粗细程度 <template> <div class="app"> <div class="GridBackground"></div> </div> </template> <script> ex

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

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

03-15

生成自定义CSS网格背景

用纯 CSS 实现网格背景

太空编程

11-29

1456

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

css绘制网格背景

李卓书

06-21

3540

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

css背景网格

qq_40053972的博客

09-08

307

【代码】css背景网格。

css网格背景样式

最新发布

fyydashen的博客

05-31

401

css网格背景样式

CSS3实现多种网格背景效果

不定时分享最优质的网络技术与教程，满满的干货。

12-08

454

对于css来说很多人都会陌生，但是对于站长来说却很熟悉，毕竟搭建一个网站不可能不会用到css，今天整理了一下我自己比较喜欢的网格背景效果，我这个人有时候喜欢简约有时候喜欢花哨，而且每个人对于美的标准都是不统一的，毕竟一百个人有一百个美的标准，css多种网格效果已经本地测试过，可以直接使用，基本每套风格的主题模板都有预留的样式接口，可以直接复制粘贴直接使用，即使小白也一样！“.content”是div框架的类名，根据实际情况设置。当然了，这个代码也是本站在用的，我感觉配色看上去很舒服。

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

qq_43260366的博客

07-13

1191

进行展示，本来是想用UI切的图片设置背景图，但是由于文字数量不固定，图片会有缩放情况造成渲染效果与预期不符，于是使用css的。如上图所示，希望文本能够。

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

littleOneYuan的博客

07-20

3894

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

css 背景设置成网格样式

FrozenNoodle的博客

04-27

909

/* 水平条纹 */ 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 格子背景

weixin_39415598的博客

07-05

819

本文简介点赞 + 收藏 + 关注 = 学会了这次会使用css画出一个格子背景。并且一步步分析如何实现~ 思路直接给答案：通过2个相等的直角三角形拼接，形成一个正方形。三角形可以使用 background-image 的渐变来实现。 html, body { margin: 0; width: 100%; height: 100%; } body { background-image: linear-gradient(45deg, #000 25%, transpar

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

Janfiveee_的博客

12-07

205

如果想背景的网格大小统一，不被拉伸，不变形，建议自己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); .

通过CSS生成网格线背景

gebieren的博客

12-29

2107

前段时间，设计图有背景是网格线的，开始想着直接用svg图进行展示，后面老大不同意，说可以直接用css样式生产的，最好不要svg,加载好性能，经过尝试，css处理起来也是特别简单的：附上代码： .grid_line { width: 100%; height: 100%; text-align: center; color: blue; box-sizing: border-box; border: 1px solid #ccc; background: -webkit

js 用css直接写网格背景

fred8的博客

04-25

603

用css直接写网格背景如果有用到画布，我们的背景有自定需要，可以用背景图片平铺展示。不过页面效果不好看。我们可以用css直接写网格背景代码 // html <div class="container"></div> // css .container{ height:300px; width:300px; background:white; background-image:lin

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

AsheAndWine的博客

01-15

8555

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

网格背景棋盘实现纯css

望京十三兄的博客

07-04

1449

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网格</title> <script>document.documentElement.style.fontS

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的灰色实线。以上是绘制网格背景的基本步骤，需要注意的是，绘制网格背景需要使用渐变色，因此可能在一些老旧的浏览器中存在兼容性问题。