CSS代码:
.box {
width: 180px; height: 180px;
background: paint(transparent-grid);
}
HTML代码:
<div class="box"></div>
JS代码:
if (window.CSS) {
CSS.paintWorklet.addModule('paint-grid.js');
}
paint-grid.js代码:
registerPaint('transparent-grid', class {
paint(context, size) {
// 两个格子颜色
var color1 = '#fff';
var color2 = '#eee';
// 格子尺寸
var units = 8;
// 横轴数轴循环遍历下
for (var x = 0; x < size.width; x += units) {
for (var y = 0; y < size.height; y += units) {
context.fillStyle = (x + y) % (units * 2) === 0 ? color1 : color2;
context.fillRect(x, y, units, units);
}
}
}
});

CSS Paint API绘制透明格子背景实例页面的更多相关文章

  1. CSS让图标变成白色或黑色实例页面 和css变灰色

    css代码 .black { filter: brightness(0); } .white { filter: brightness(100); } html代码 <h4>原图</ ...

  2. CSS实现背景透明而背景上的文字不透明完美解决

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  3. CSS实现背景透明而背景上的文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  4. duilib修复ActiveXUI控件bug,以支持flash透明动态背景

    转载请说明原出处,谢谢~~ 昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了 防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背 ...

  5. W3School-CSS 背景实例

    CSS 背景实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...

  6. gdi+ 高速绘制透明窗体

    gdi+ 高速绘制透明窗体: 方法一: 1.用Iamge对象载入png资源, 2.调用drawimage函数讲图片绘制出了 3.UpdateLayeredWindow对窗体进行布局 方法二: 1.用B ...

  7. HTML 背景实例

    71.HTML 背景实例好的背景使站点看上去特别棒.背景(Backgrounds)<body> 拥有两个配置背景的标签.背景可以是颜色或者图像.<body> 标签中的背景颜色( ...

  8. css奇特用法之 IMG添加背景图片配合显示--效果惊艳

    IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...

  9. Python绘制3d螺旋曲线图实例代码

    Axes3D.plot(xs, ys, *args, **kwargs) 绘制2D或3D数据 参数 描述 xs, ys X轴,Y轴坐标定点 zs Z值,每一个点的值都是1 zdir 绘制2D集合时使用 ...

随机推荐

  1. 01_传智播客iOS视频教程_课程介绍与知识点回顾

    OC语法中static关键字不能修饰属性,也不能修饰方法,只能修饰方法中的局部变量.static修饰局部变量之后把局部变量变成静态变量.当方法执行完之后这个变量不会被回收.下次再执行这个方法的时候这个 ...

  2. FluentData - 轻量级.NET ORM持久化技术解决方案

    官方地址:http://fluentdata.codeplex.com/ 官方教程:http://fluentdata.codeplex.com/documentation FluentData入门 ...

  3. influxdb数据库增加身份认证(windows)三

    接上一节,增加数据库身份认证 1.修改Config配置文件auth-enabled为true 2.然后重新载入最新的config配置文件打开数据库 3.验证身份认证功能是否已打开 说明身份认证功能已打 ...

  4. A joke about regular expression

    As the old computer science joke goes: “Let’s say you have a problem, andyou decide to solve it with ...

  5. #undef及其用法

    简    介 在后面取消以前定义的宏定义 在此程序中,我们将取消在先前程序中对预处理器的定义. #include <stdio.h> int main( void ) { #define ...

  6. 《windows核心编程系列》十九谈谈使用远程线程来注入DLL。

    windows内的各个进程有各自的地址空间.它们相互独立互不干扰保证了系统的安全性.但是windows也为调试器或是其他工具设计了一些函数,这些函数可以让一个进程对另一个进程进行操作.虽然他们是为调试 ...

  7. .NET下集中实现AOP编程的框架

    一.Castle 使用这个框架呢,首先是需要安装NuGet包. 先建立一个控制台项目,然后在NuGet中搜索Castle.Windsor,不出意外的话应该能找到如下的包 然后安装,会自动的安装包Cas ...

  8. Service官方教程(7)Bound Service示例之1-同进程下直接继承Service

    Extending the Binder class If your service is used only by the local application and does not need t ...

  9. 转: ORA-06508 could not find program unit being called: "DBSNMP.BSLN_INTERNAL

    告警日志中出现错误 Sun Jul 28 00:00:00 2013Errors in file /oracle/app/db/diag/rdbms/mis/MIS1/trace/MIS1_j001_ ...

  10. Hadoop YARN学习之监控集群监控Nagios(4)

    doop YARN学习之监控集群监控Nagios(4) 1. Nagios是一个流行的开源监控工具,可以用来监控Hadoop集群. 2. 监控基本的Hadoop服务 调试好脚本后命名为chek_res ...