HTML 拉伸背景图像

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 拉伸背景图像相关的知识，希望对你有一定的参考价值。

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Stretch background</title>
	<style type="text/css">
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
			font-family: Verdana, Geneva, sans-serif;
			font-size: 100%;
			color: #000;
			background-color: #FFF;
		}
		
		img#bg {
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}
		
		#content {
			position:relative;
			z-index:1;
			Margin: 20px;
		}
		
		#content p {
			font-size:80%;
			font-weight: bold;
		}
		
		#content h1 {
			color:#369;
			font-size:90%;
			font-weight: bold;
		}
		
	</style>

	<!--[if IE 6]>
	<style type="text/css">
		html { overflow-y: hidden; }
		body { overflow-y: auto; }
		#bg { position:absolute; z-index:-1; }
		#content { position:static; }
	</style>
	<![endif]-->
</head>

<body>
	<img src="images/stretchbg.jpg" alt="background image" id="bg" />

	<div id="content">

		Content goes here

	</div>

</body>
</html>

<!-- Original at http://www.texaswebdevelopers.com/examples/stretch-bg.asp -->

怎么让网页的背景图片随着页面的拉伸而拉伸

参考技术A background-repeat : repeat | no-repeat | repeat-x | repeat-y 取值： repeat : 默认值。背景图像在纵向和横向上平铺 no-repeat : 背景图像不平铺 repeat-x : 背景图像仅在横向上平铺 repeat-y : 背景图像仅在纵向上平铺本回答被提问者采纳

以上是关于HTML 拉伸背景图像的主要内容，如果未能解决你的问题，请参考以下文章

HTML 拉伸背景图像

怎么让网页的背景图片随着页面的拉伸而拉伸

拉伸背景图像

html 如何让背景图片充满全图，就是拉伸

如何使用 CSS 拉伸表格单元格的背景图像？

iPhone X 中的背景图像拉伸