可编程的css背景属性CSS Paint API-BFW博客

可编程的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%

打赏博主×