html图片上绘制网格线,使用CSS3绘制网格线

话说昨天在写在线素描的时候，想着给画布加上些网格，就跟PS里面的一样。但是用canvas画是不行的(注：不是它不行……)，图片又让我不齿，就作罢了。

今天想着要不尝试着用CSS3画一个，找了些资料，看了下CSS3的所有属性，竟然也被我找到画网格的方法了，喔～哇哈哈哈～～

这些属性就是——linear-gradient、background-size，大家鼓掌欢迎他们～

那到底要怎么做呢？我们暂时不考虑网格，先想想，怎么画一条横线呢？

……(10分钟过去鸟)

好，看下面的代码(只贴了webkit的实现，其他的太多，不想写，下同～ <_>

Css

它的效果是酱紫滴：

前面39px的都是透明的，那只要让40px之后的也是透明的或者看不到不就成了一条线了么。这时background-size就上场咯。何谓background-size？w3cschool如是说：

The background-size property specifies the size of the background images.

也就是指定背景图片(渐变也是个图片)的大小。比如说一张100 x 100的图片，可以用这个属性指定只显示其中的30 x 20(纯属举例)。这里把水平限制设置为100%(也就是不限制)，垂直方向限制成只显示40px的范围。这样就会漏出1像素的蓝色，看上去就成了一条线了。

Css

可以看到，当不设置背景平铺的时候，横线就出来了吧。加上repeat之后，hoho，就成了信纸咯～

那么，接下来的事就容易过剃头啦(么剃头很容易么)！利用CSS3的多重背景，依个葫芦画个瓢再加个垂直的竖线，就搞定咯。完整的代码如下：

Css

呼～大功告成！如果你的浏览器支持CSS3，可以到这里查看live demo。不过这个网格是不是有点单调？如果你够创意，可以整成更炫哦～比如说：2px宽，颜色相间的网格——

嗯，剩下的就各位自由发挥了，hoho～～

html图片上绘制网格线,使用CSS3绘制网格线 | Tencent AlloyTeam相关推荐

html图片网格线,使用 CSS3 绘制网格线
话说昨天在写在线素描的时候,想着给画布加上些网格,就跟 PS 里面的一样.但是用 canvas 画是不行的(注:不是它不行--),图片又让我不齿,就作罢了. 今天想着要不尝试着用 CSS3 画一个,找 ...
【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现 html代码 CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
css3控制html中图片,精选4款用纯CSS3绘制的有趣图形
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢今天我们要分享一个利用纯C ...
使用ImageMagick 在图片上绘制粗斜体的中文也许是一个错误。
测试发现: ImageMagick使用中文字体,在图片上绘制带粗或斜体的中文,看不到效果. 如果使用英文字体,绘制粗或斜体的英文,99%都有效果. 今天无意看到一篇文章提到: convert -lis ...
使用cv2在图片上绘制点
数据的格式为坐标构成的list,要将这些点绘制在图片上并保存: import os import sys import cv2imagePath="./img/"image = c ...
python在图片上绘制标注框
前言最近帮人跑代码的时候遇到了不少问题,后来发现他提供给我的数据集中标注文件不太准确,部分box框没有很好地框到物体.所以写了一个代码,通过在图片上绘制标注框来直观地判断标注文件是否存在问题,也可以 ...
python手记（四）：pillow（四） ImageDraw模块图片绘制（图片上自定义绘制）
人生不易且无趣,一起来找点乐子吧.欢迎评论,和文章无关的也可以. 这次说下ImageDraw module,其实从名字上就可以看出来,这个模块的功能是什么.就是在图片上绘制一些东西,比如文字,简单图形 ...
目标检测之将bbox绘制到图片上
绘制bbox 文件夹内容其中train1里面放的是待绘制的图片 train1_crop.json里面保存的是train1文件夹里数据的信息,三个指标:name,defect_name,bbox 例如 ...
python 使用opencv在图片上绘制矩形、圆形以及中英文
最近看了下python的第三方库opencv,在python中用来对图片进行一些简单处理还是非常好用的,比如在图形上画矩形框,圆框,指示线,椭圆以及文字等,只需要调用几个相应的函数,设置好起止坐标点以 ...

html图片上绘制网格线,使用CSS3绘制网格线 | Tencent AlloyTeam

html图片上绘制网格线,使用CSS3绘制网格线 | Tencent AlloyTeam相关推荐

最新文章

热门文章