CSS image overlap effect

 In the new generation of web design styles, the effect of overlapping several pictures is often used, such as making some photo albums or atlases, so that the overlapping effect always gives people a more three-dimensional feeling. The common method is to do the art first. The image is then inserted into the web page. Another way is to achieve it directly through the z-index and position functions of CSS . The two images below are overlapped, and only simple CSS syntax can be used. Requires additional GIMP art software to make pictures. Example grammar

<style type="text/css">
<!--
#IMG_1{
　position:absolute;
　top:10px;
　left:10px;
　width:150px;
　height:150px;
　background-color:#53E355;
　z-index:1;
}
#IMG_2{
　position:absolute;
　top:30px;
　left:30px;
　width:150px;
　height:150px;
　background-color:#6DA9E7;
　z-index:2;
}
-->
</style>
<img scr=" IMG_1" id="IMG_1">
<img scr="IMG_2" id="IMG_2">

The first picture is a green picture (color code: #53E355), and the second picture on top is a blue picture (color code: #6DA9E7). Use <style tyle="text/css"> and < The /style> tag wraps the CSS grammar, which is used to control the style of the bottom two < img > image tags. The position of IMG_1 is set to an absolute position, that is, position:absolute. The distance between the top and the left is both 10px, the position setting of the IMG_2 picture is also an absolute position, but the positions on the top and left are different from IMG_1, the purpose is to simply make the two pictures overlap. The more important thing is the z-index setting. The smaller the z-index number, the lower the picture will be, so IMG_2 in this example will be pressed on top of IMG_1, and so on, you can make many pictures overlapped. Effect.