Requirements:
Make a "rectangular div block" and use "long strip background image.jpg" as its background, and the area of the image is smaller than the "rectangular div block";
Make four div sub-blocks , arranged in a row, covering the "rectangular div block",
Each of the four sub-blocks: 25% of the width, semi-transparent, and the colors are "blue, green, yellow, purple"
Each div block The height is height:300px; the width needs to adapt to the page size.
1
2
< div class="bottom_top pic">3
4
------ -------------------------------------------------- --------------------
css file is:
.bottom_top{
width:100%;
height:300px;
background-image:url("Long background image.jpg");
background-size:50%;
z-index:10;
}
.pic{
width:25%;
height:300px;
float:left;
background-image:none;
background-color:orange;
opacity:0.4;
z-index:30;
}
Reply to discussion (solution)
Four div sub-blocks float relative positioning and calculate by yourself Just divide it into lengths,
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
