HTML全屏背景图

最新推荐文章于 2023-06-01 10:26:20 发布

风叶翩翩

最新推荐文章于 2023-06-01 10:26:20 发布

阅读量1.5w

点赞数 24

分类专栏： H5 帮助文档

本文链接：https://blog.csdn.net/weixin_45743799/article/details/103407920

版权

帮助文档同时被 2 个专栏收录

66 篇文章 3 订阅

订阅专栏

32 篇文章 2 订阅

订阅专栏

当我们在写前端页面的时候为了页面的美观我们通常会为页面设置图片背景，那么我们如何来设置全屏的背景图呢？？？

设置全屏背景图需要三个属性

			background-image: url(img/untitled.png);
			background-repeat: no-repeat;
			background-size: cover;

案例说明

设置背景图片
代码设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		body{
			background-image: url(img/untitled.png);
			
		}
	</style>
	<body>
		
	</body>
</html>

样式欣赏（出现好多张，并不是我们想要的全屏背景图）
在这里插入图片描述
设置相关属性之后

代码设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		body{
			background-image: url(img/untitled.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
	<body>
		
	</body>
</html>

样式欣赏（全屏背景图显示）
在这里插入图片描述
此时的显示是我们想要的效果。

了解更多关注我哟！！！

风叶翩翩

关注

24
点赞
踩
72

收藏

觉得还不错? 一键收藏
1
评论
HTML全屏背景图

当我们在写前端页面的时候为了页面的美观我们通常会为页面设置图片背景，那么我们如何来设置全屏的背景图呢？？？设置全屏背景图需要三个属性 background-image: url(img/untitled.png); background-repeat: no-repeat; background-size: cover;案例说明设置背景图片代码设置<!DOCTY...
复制链接

扫一扫