html让背景图片自适应填充整个页面

最新推荐文章于 2024-08-13 01:30:21 发布

上岸啦小王

最新推荐文章于 2024-08-13 01:30:21 发布

阅读量3.7w

点赞数 50

分类专栏：前端实训bug 文章标签： html5

本文链接：https://blog.csdn.net/qq_51636863/article/details/122112383

版权

前端实训bug 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了三种实现网页全屏背景图的方法：使用img标签并设置绝对定位；利用CSS属性background-size:cover使背景图自适应屏幕大小；通过设定background-size为100% 100%结合background-attachment:fixed实现。

摘要由CSDN通过智能技术生成

方法一：img标签设置

body类的样式：去除默认外边距和内外距为0；

body中写img标签：图片设置宽高都为100%，位置为absolute；

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body {
				padding: 0;
				margin: 0;
			}
			
			img {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<img src="img/bottom.jpg">
	</body>

</html>

方法二：background-size:cover;属性指定背景图片大小

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>练习</title>
		<style>
			body {
				/*加载背景图：图片地址 不平铺 */
				background: url(img/l.png) no-repeat center center;
				/* 让背景图基于容器大小伸缩 */
				background-size: cover;
				/* background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
					scroll 背景图片随着页面的滚动而滚动，这是默认的。
 					fixed 背景图片不会随着页面的滚动而滚动。
  					local 背景图片会随着元素内容的滚动而滚动。*/
				background-attachment: fixed;
			}
		</style>
	</head>

	<body>

	</body>

</html>

方法三：background-size：100% 100%；与background-attachment:fixed;设置

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>练习</title>
		<style>
			body {
				/*加载背景图：图片地址 不平铺 */
				background: url(img/l.png) no-repeat;
				/* 让背景图基于容器大小伸缩 */
				background-size: 100% 100%;
				background-attachment: fixed;
			}
		</style>
	</head>

	<body>

	</body>

</html>

效果展示：