CSS实现body背景层高于块元素

最新推荐文章于 2025-04-08 20:56:52 发布

herbertyoung

最新推荐文章于 2025-04-08 20:56:52 发布

阅读量648

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css background

本文链接：https://blog.youkuaiyun.com/yhb241/article/details/43560355

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用CSS设置body背景图片，并使其覆盖于所有块元素之上的方法。通过调整z-index和position属性，实现了背景图片仅在底部显示且不重复的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS实现body背景层高于块元素，Demo如下：

<!DOCTYPE html>
<html lang="en">
<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 class="box"></div>
</body>
</html>