The content of this article is about how to realize that the body background layer is higher than the block element in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The example in this article describes the CSS method to realize that the body background layer is higher than the block element, and is shared with everyone for your reference. The specific implementation method is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
</head>
<style>
html, body{
width: 100%;
max-width: 640px;
height: 100%;
overflow-x: hidden;
margin: 0 auto;
background-color: #000;
font-family: 微软雅黑, 华文细黑, 黑体;
}
body{
background-image: url('img/person1.png');
background-repeat: no-repeat;
background-position: bottom;
background-color: transparent;
background-size: 100%;
}
.box{
width: 100%;
height: 50%;
background-color: green;
z-index: -1;
position: absolute;
}
</style>
<body>
<div></div>
</body>
</html>The effect is as follows:
The above is a complete introduction to how to realize the body background layer is higher than the block element in CSS. If you want To learn more about CSS3 tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of How to make the body background layer higher than the block element in CSS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
