CSS 基础学习-248 css全尺寸背景图像

hrs 提交于 2023/09/16 - 05:34 , 周六

              background-image:url(img/img1.jpg);    定义图像文件位置
                background-position:center;                      定义图像居中位置
                background-repeat:no-repeat;                   定义图像不重复显示
                background-size:cover;                                 定义图像完全覆盖区域
                background-attachment:fixed;                    定义图像视口大小。

实例代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			html{
				background-image:url(img/img1.jpg);
				background-position:center;
				background-repeat:no-repeat;
				background-size:cover;
				background-attachment:fixed;
			}
			body{
				color:white;
			}
			
		</style>

	</head>
	<body>
		<h1>完整页面的背景图像</h1>
		<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai! The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
	</body>
</html>

运行效果:

 

标签