这篇文章主要介绍“CSS怎么创建一个透明图片背景”,在日常操作中,相信很多人在CSS怎么创建一个透明图片背景问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS怎么创建一个透明图片背景”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
10年积累的网站设计制作、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有工布江达免费网站建设让你可以放心的选择与我们合作。
一、把Canvas图片作为CSS背景图片
CSSPaintAPI可以简单理解为(实际不能等同)把Canvas画布作为普通元素的背景图片。
也就是CSS的background-image就是一个Canvas,我们可以利用Canvas绝大多数API绘制各种复杂有趣的图形效果,以一种更高效的方式丰富web页面元素的视觉展现。例如,蓝色按钮不仅仅是个蓝色背景,上面还有白云漂漂的效果,想想就很棒!
二、一个简单的案例了解CSSPaintAPI
例如,我们希望创建一个透明图片背景。
则完整的CSS代码和JS部分代码如下:
.box{
width:180px;height:180px;
/*transparent-grid自己命名*/
background-image:paint(transparent-grid);
}
然后绘制图形的JS务必作为模块引入,例如,建一个名为paint-grid.js的文件,在页面上引入:
if(window.CSS){
CSS.paintWorklet.addModule('paint-grid.js');
}
paint-grid.js文件代码如下:
//transparent-grid命名和CSS中的对应
registerPaint('transparent-grid',class{
paint(context,size){
//这里就是绘制的代码了…
}
});
以上就是CSSPaintAPI使用的固定套路:
CSS中paint(abc);
JS添加模块CSS.paintWorklet.addModule(‘xxx.js’);
xxx.js中代码套路固定,在下面注释位置写绘制代码即可;
registerPaint('abc',class{
paint(context,size,properties){
//绘制代码在这里…
}
});
其中paint(context,size)中的两个参数可以稍微介绍下:
context
为绘制上下文,全称是PaintRenderingContext2D,和Canvas的CanvasRenderingContext2D是近亲,API全部来自Canvas,一模一样,不过由于安全限制,有些Canvas中的有些API是不能使用的,可用和不可用的API见下表:
微信截图_20181127164151.png
size
size是一个包含了绘制尺寸的对象,数据结构如下:
{
width:180,
height:180
}
size的大小受到background-size属性大小的影响,因此,对于重复背景,可以借助background-repeat进行平铺循环,不用非得在绘制的JS代码中循环。例如,下面即将要展示的demo效果,也可以这么实现,CSS部分:
.box{
width:180px;height:180px;
background-image:paint(transparent-grid);
background-size:16px16px;
}
然后,paint-grid.js中只需要填充白-灰-灰-白,4个格子就好了,无需循环。
properties
可以用来获得get到的CSS属性和属性值,包括CSS变量值;以及其他一些参数。
眼见为实,您可以狠狠地点击这里:CSSPaintAPI绘制透明格子作为背景demo(目前仅Chrome有效果)
透明格子效果demo
paint-grid.js中的完整绘制代码如下:
registerPaint('transparent-grid',class{
paint(context,size){
//两个格子颜色
varcolor1='#fff',color2='#eee';
//格子尺寸
varunits=8;
//横轴数轴循环遍历下
for(varx=0;x for(vary=0;y context.fillStyle=(x+y)%(units*2)===0?color1:color2; context.fillRect(x,y,units,units); } } } }); 补充: 类似格子这类重复背景,可以借助background-repeat进行平铺循环,不用非得在绘制的JS代码中循环,不过需要借助background-size属性帮助,改变绘制的尺寸。例如,上面demo效果,也可以这么实现,CSS部分: .box{ width:180px;height:180px; background-image:paint(transparent-grid); background-size:16px16px; } 然后,paint-grid.js中只需要填充白-灰-灰-白,4个格子就好了,无需循环。 registerPaint('transparent-grid',class{ paint(context,size){ //两个格子颜色 varcolor1='#fff',color2='#eee'; //两个白色格子 context.fillStyle=color1; context.fillRect(0,0,8,8); context.fillRect(8,8,8,8); //两个灰色格子 context.fillStyle=color1; context.fillRect(0,4,8,8); context.fillRect(4,0,8,8); } }); 到此,关于“CSS怎么创建一个透明图片背景”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
分享名称:CSS怎么创建一个透明图片背景
本文路径:http://njwzjz.com/article/pdicio.html