Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to create a transparent picture background in CSS". In daily operation, I believe many people have doubts about how to create a transparent picture background in CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to create a transparent picture background in CSS". Next, please follow the editor to study!

First, use the Canvas picture as the CSS background picture

CSSPaintAPI can simply be understood as (not actually equivalent to) using the Canvas canvas as the background image of a common element.

That is, CSS's background-image is a Canvas, and we can use the vast majority of Canvas API to draw a variety of complex and interesting graphic effects to enrich the visual presentation of web page elements in a more efficient way. For example, the blue button is not only a blue background, but also has a beautiful effect of white clouds. It's great to think about it!

Second, a simple case to understand CSSPaintAPI

For example, we want to create a transparent picture background.

The complete CSS code and part of the JS code are as follows:

.box {

Width:180px;height:180px

/ * transparent-grid names itself * /

Background-image:paint (transparent-grid)

}

Then the JS for drawing must be introduced as a module, for example, to create a file called paint-grid.js and introduce it on the page:

If (window.CSS) {

CSS.paintWorklet.addModule ('paint-grid.js')

}

The paint-grid.js file code is as follows:

/ / transparent-grid naming and correspondence in CSS

RegisterPaint ('transparent-grid',class {

Paint (context,size) {

/ / here is the drawn code.

}

})

These are the fixed routines used by CSSPaintAPI:

Paint (abc) in CSS

JS add module CSS.paintWorklet.addModule ('xxx.js')

The code pattern in xxx.js is fixed. Just write the drawing code in the comment position below.

RegisterPaint ('abc',class {

Paint (context,size,properties) {

/ / the drawing code is here.

}

})

The two parameters in paint (context,size) can be described slightly:

Context

For drawing context, the full name is PaintRenderingContext2D, and Canvas's CanvasRenderingContext2D is a close relative. API is all from Canvas, exactly the same, but due to security restrictions, some API in some Canvas cannot be used. The available and unavailable API are shown in the following table:

Wechat screenshot _ 20181127164151.png

Size

Size is an object that contains drawing dimensions, and the data structure is as follows:

{

Width:180

Height:180

}

The size of the size is affected by the size of the background-size attribute, so for repeating backgrounds, you can use background-repeat to tile the loop without having to cycle through the drawn JS code. For example, the following demo effect, which is about to be shown, can also be implemented in the CSS part:

.box {

Width:180px;height:180px

Background-image:paint (transparent-grid)

Background-size:16px16px

}

Then, the paint-grid.js only needs to fill in white-gray-gray-white, and four squares will be fine without circulation.

Properties

Can be used to get the CSS attribute and property value from get to, including the value of the CSS variable; and other parameters.

Seeing is believing, you can click here: CSSPaintAPI draws a transparent grid as a background demo (currently only Chrome works)

Transparent lattice effect demo

The complete drawing code in paint-grid.js is as follows:

RegisterPaint ('transparent-grid',class {

Paint (context,size) {

/ / two plaid colors

Varcolor1='#fff',color2='#eee'

/ / Lattice size

Varunits=8

/ / horizontal axis number axis cycle traversal

For (varx=0;x

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.