html页面背景图片无法在浏览器中显示出来 – 解决方案

html文件代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动手纠错1</title>
<style>
	.content{
    width: 278px;
    height: 188px;
    margin-top: 226px;
    margin-left: 1014px;
		
	}	
</style>

</head>
<!--设置页面的背景图片-->
<body background="../images/1.jpg">
	<div class="content">	
	<span>小新AIR12</span>
	<h1>简约设计 金属机身</h1>
	<span>12.2英寸|13.4mm轻薄时尚本Core-M|4G</span>
	<h1></h1>
	<span>128G SSD|1.2kg</span>
	</div>
</body>
</html>

浏览器显示页面:

浏览器显示页面
浏览器显示页面

检查后报错:

检查后报错
检查后报错

根据检查报告的错误,很明显是加载源文件失败:错误_文件_未找到。

解决方案如下代码所示(将background后引用的路径“../images/1.jpg”更改为“images/1.jpg”)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动手纠错1</title>
<style>
	.content{
    width: 278px;
    height: 188px;
    margin-top: 226px;
    margin-left: 1014px;
		
	}	
</style>

</head>
<!--设置页面的背景图片-->
<body background="images/1.jpg">
	<div class="content">	
	<span>小新AIR12</span>
	<h1>简约设计 金属机身</h1>
	<span>12.2英寸|13.4mm轻薄时尚本Core-M|4G</span>
	<h1></h1>
	<span>128G SSD|1.2kg</span>
	</div>
</body>
</html>

更改后效果如图:

解决后效果图片
解决后效果图片

本人于2023年1月24日03:09:57完成实践并撰写本文章,特于此记录并分享。

© 版权声明
THE END
喜欢就点赞支持一下吧,如果觉得不错或日后有所需要,可以收藏文章和关注作者哦。
点赞4
评论 抢沙发

请登录后发表评论

    暂无评论内容