可编程的css背景属性CSS Paint API

可编程的css背景属性CSS Paint API

可编程的css背景属性CSS Paint API

CSS Paint API只是一W3C规范的一部分,它特别允许您调用paint()函数,无论您通常在需要图像的地方编写一个值。一个常见的例子是background image属性,您可以在其中使用url()函数链接到图像文件,如下所示:

area {
  background-image: url('assets/myimage.jpg');
}
css paint api允许您调用paint()函数,并传递通过javascript定义的paint工作集。把它想象成一段代码,它允许你以编程方式画出你喜欢的任何东西。因为它是Javascript,所以你也可以使它成为动态的。API本身非常类似于HTML5<canvas>API。

area {
  background-image: paint(awesomePattern);
};

从提出一个新的CSS特性,到编写一个规范,再到让浏览器供应商实现这个新的规范的过程可能需要一段时间
。我相信未来会越来越多的浏览器支持这一特性。目前支持的浏览器如下:

可编程的css背景属性CSS Paint API

无论如何,让我们来看一下如何创建代码来使用它。

第一步,编写css

section {
  background-image: url('fallback.png');
  background-image: pa...

点击查看剩余70%

{{collectdata}}

网友评论0