CSS3 multiple background image design

 CSS background-image is very useful for inserting background images for the web page itself ( body ) or web page elements. This background image property has made more powerful progress in CSS3 . CSS designers can use the new background-image property to design The effect of multiple background pictures is very simple to use, that is, in the traditional mode of inserting a background picture, it is added to insert two or more background pictures, so that the browser can show the effect of two background pictures overlapping at the same time. It is very helpful for creating a multi-layered background image style for web pages. If you are not familiar with the syntax of the background-image attribute, let’s review it first.

CSS background image property syntax

background-image: url (background image URL), url (background image URL) ...;

The parameter part is the URL where the background image is inserted. CSS3 began to allow the background-image property to allow the use of multiple different url parameters to increase the number of background images. In this article, we need to design the effect of multiple web page background images. In the example, we will use three url parameters to insert three different background images in the same background-image property . Let ’s take a look at the actual example application right away.

CSS3 multiple background image actual design example

<style>
#multiple_background_image{
width:100%;
height:500px;
background-image: url(upload/20150615125139.png), url(upload/20150615125142.png),url(upload/20150615125145.png);
}
</style >
<div id="multiple_background_image"></div>

The three background pictures used here are these three (presented in a table for you to see)
The visual effects of the applied multiple background images are as follows

After applying three different background images to the background-image property, you can see a very colorful effect, because each background image is presented, and when stacked together, there will be such a visual effect. The same concept can be seen through Different background pictures, design more exquisite multi-layered background effects.

There is a key → png

here to remind you a little bit, to make this kind of multi-background image effect, the selected background image must be a transparent image file, that is, the pattern to be displayed can be displayed normally, and the other parts must be transparent Yes, for example, the three pictures we used in the example are all png files with transparent effects.