VisualStudio怎么给网页插入全屏显示的背景图片
发布于2026-04-21 阅读（0）
扫一扫，手机访问
VisualStudio怎么给网页插入全屏显示的背景图片
想在Visual Studio里给网页加一个撑满整个屏幕的背景图片？这事儿其实没想象中那么复杂。咱们一步步来，用最直观的方式搞定它。首先，你得在Visual Studio里打开你的网站项目，这里我们以一个名为“TwoFish”的网站为例。放心，所需的图片素材、CSS样式文件和Ja vaScript代码都已经提前准备好了，就放在项目里。
第一步，找到网页的“骨架”——也就是
标签。这是所有页面内容的容器，我们的背景图片最终就是要放在这里。
接下来，在
内部，定位到你希望背景图片生效的那个区域。当然，如果你想针对整个页面，直接操作标签本身也是可以的。
标签后面，准备插入样式和脚本的链接。</p>
<p><img src="/uploads/20260421/177676530747124.webp" /></p>
<p>首先引入CSS样式文件。使用<link>标签，其中<code>href</code>属性指向你的CSS文件路径，<code>rel</code>属性定义了当前文档和链接文档的关系（这里是样式表）。CSS文件里已经写好了如何让图片固定、覆盖全屏的样式规则。</p>
<p><img src="/uploads/20260421/177676530777610.webp" /></p>
<p>然后，引入Ja vaScript文件。使用<script>标签，其<code>src</code>属性指向JS文件的路径。JS文件里包含了控制图片显示逻辑的代码。</p>
<p><img src="/uploads/20260421/177676530712495.webp" /></p>
<p>关于如何让图片尺寸适应屏幕、如何居中覆盖这些具体的控制代码，都已经预先封装在刚才引用的CSS和JS文件里了。这样一来，我们的HTML页面就变得非常清爽，核心逻辑都被分离了出去。</p>
<p><img src="/uploads/20260421/177676530772778.webp" /></p>
<p>最后一步，再添加一个<script>标签，调用一个特定的Ja vaScript函数。这个函数就像是一道最终指令，它会找到我们之前用<code>id</code>标记好的那张图片，并执行将其设置为全屏背景的所有操作。</p>
<p><img src="/uploads/20260421/177676530729022.webp" /></p>
<p>代码都写好了，效果怎么样？在解决方案资源管理器里，右键点击这个网页文件，选择“在浏览器中查看”。</p>
<p><img src="/uploads/20260421/177676530884415.webp" /></p>
<p>看，浏览器打开了。之前插入的那张图片，现在已经不再是普通的内容图片，而是完美地铺满了整个浏览器窗口，成为了真正的全屏背景。大功告成！</p>
<p><img src="/uploads/20260421/177676530823344.webp" /></p> </div>
<div class="laiyuan">
本文转载于：https://soft.3dmgame.com/gl/12652.html 如有侵犯，请联系zhengruancom@outlook.com删除。<br/>免责声明：正软商城发布此文仅为传递信息，不代表正软商城认同其观点或证实其描述。
</div>
<div class="zrSypBox">
<p>上一篇：<a href="https://www.zhengruan.com/news/626569" title="网易家长关爱平台位置在哪" class="aRed">网易家长关爱平台位置在哪</a></p>
<p class="right">下一篇：<a href="https://www.zhengruan.com/news/626571" title="Laravel如何使用Eloquent模型_Laravel使用Eloquent模型方法【ORM】" class="aRed">Laravel如何使用Eloquent模型_Laravel使用Eloquent模型方法【ORM】</a></p>
<div class="clear"></div>
</div>
<div class="zrDtxwBox">
<div class="zrByddTitle">
<span><h2>产品推荐</h2></span>
</div>
<ul class="zrTxdmList3">
<li class="one">
<div class="zrTxdmCont5">
<div class="zrTxdmImg4 dianji">
<a href="https://www.zhengruan.com/product/69" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/cd14258f0172a172f8a80798c38c1577.jpg" alt="DAEMON Tools Lite 10"></a>
<span class="xianshi">
<p>售后无忧</p>
<em><a href="https://www.zhengruan.com/product/69" title="立即购买>">立即购买></a></em>
</span>
</div>
<div class="zrTxdmIn4">
<dl>
<dt><a href="https://www.zhengruan.com/product/69" title="DAEMON Tools Lite 10【序列号终身授权 + 中文版 + Win】" class="aBlack">DAEMON Tools Lite 10【序列号终身授权 + 中文版 + Win】</a></dt>
<dd>
<span>￥150.00</span>
<p>office旗舰店</p>
</dd>
</dl>
</div>
</div>
</li>
<li >
<div class="zrTxdmCont5">
<div class="zrTxdmImg4 dianji">
<a href="https://www.zhengruan.com/product/67" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/fbf473d4d30833324962e441c0f18265.jpg" alt="DAEMON Tools Ultra 5"></a>
<span class="xianshi">
<p>售后无忧</p>
<em><a href="https://www.zhengruan.com/product/67" title="立即购买>">立即购买></a></em>
</span>
</div>
<div class="zrTxdmIn4">
<dl>
<dt><a href="https://www.zhengruan.com/product/67" title="DAEMON Tools Ultra 5【序列号终身授权 + 中文版 + Win】" class="aBlack">DAEMON Tools Ultra 5【序列号终身授权 + 中文版 + Win】</a></dt>
<dd>
<span>￥198.00</span>
<p>office旗舰店</p>
</dd>
</dl>
</div>
</div>
</li>
<li >
<div class="zrTxdmCont5">
<div class="zrTxdmImg4 dianji">
<a href="https://www.zhengruan.com/product/68" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/1ae250399abf4ff584d86d52c79b5bb6.jpg" alt="DAEMON Tools Pro 8"></a>
<span class="xianshi">
<p>售后无忧</p>
<em><a href="https://www.zhengruan.com/product/68" title="立即购买>">立即购买></a></em>
</span>
</div>
<div class="zrTxdmIn4">
<dl>
<dt><a href="https://www.zhengruan.com/product/68" title="DAEMON Tools Pro 8【序列号终身授权 + 中文版 + Win】" class="aBlack">DAEMON Tools Pro 8【序列号终身授权 + 中文版 + Win】</a></dt>
<dd>
<span>￥189.00</span>
<p>office旗舰店</p>
</dd>
</dl>
</div>
</div>
</li>
<li >
<div class="zrTxdmCont5">
<div class="zrTxdmImg4 dianji">
<a href="https://www.zhengruan.com/product/29" class="img"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/77d3c04866e1b842d9b6ff0e9368bdf8.jpg" alt="CorelDRAW X8 简体中文"></a>
<span class="xianshi">
<p>售后无忧</p>
<em><a href="https://www.zhengruan.com/product/29" title="立即购买>">立即购买></a></em>
</span>
</div>
<div class="zrTxdmIn4">
<dl>
<dt><a href="https://www.zhengruan.com/product/29" title="CorelDRAW X8 简体中文【标准版 + Win】" class="aBlack">CorelDRAW X8 简体中文【标准版 + Win】</a></dt>
<dd>
<span>￥1788.00</span>
<p>office旗舰店</p>
</dd>
</dl>
</div>
</div>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
<ul class="zrZbrjList" style="padding-top:10px;">
<li>
<a href="https://www.zhengruan.com/news/621879" class="img1" title="B站官网入口地址是多少">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260414/177615144562689.jpeg" alt="B站官网入口地址是多少">
<span>正版软件</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/621879" title="B站官网入口地址是多少" class="aBlack">B站官网入口地址是多少</a></dt>
<dd class="cont1">B站主页网址是https://www.bilibili.com/，提供内容分区浏览、多设备访问支持及个性化功能特性，涵盖主站、番剧、游戏、漫画、直播等模块，支持电脑、移动端、TV端使用，并具备离线缓存与创作管理功能。</dd>
<dd class="cont2">
<!--<span class="cont1"><img src="zrimages/example/img10.png"/>山外的鸭子哥</span>-->
<span class="cont2"><b></b>6分钟前</span>
<span class="cont3">
<a href="javascript:void(0)" title="B站">B站</a>
</span>
<span class="cont4"><b></b>0</span>
</dd>
</dl>
</li>
<li>
<a href="https://www.zhengruan.com/news/626934" class="img1" title="哪里找QQ邮箱账号登录入口">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260421/177677580232947.jpg" alt="哪里找QQ邮箱账号登录入口">
<span>正版软件</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/626934" title="哪里找QQ邮箱账号登录入口" class="aBlack">哪里找QQ邮箱账号登录入口</a></dt>
<dd class="cont1">顺利登录QQ邮箱，开启高效沟通第一步 在数字化浪潮之下，QQ邮箱早已不单是一款通讯工具，它无缝融入了我们工作与生活的方方面面，成为处理事务、传递信息的关键节点。而所有这一切便利的起点，无疑是成功登录你的账号。今天，我们就来梳理一下目前主流的几种登录入口和操作路径，帮你找到最适合自己的那一种。 QQ邮</dd>
<dd class="cont2">
<!--<span class="cont1"><img src="zrimages/example/img10.png"/>山外的鸭子哥</span>-->
<span class="cont2"><b></b>8分钟前</span>
<span class="cont4"><b></b>0</span>
</dd>
</dl>
</li>
<li>
<a href="https://www.zhengruan.com/news/626933" class="img1" title="微信客户端怎么切换账号">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260421/177677580220682.jpg" alt="微信客户端怎么切换账号">
<span>正版软件</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/626933" title="微信客户端怎么切换账号" class="aBlack">微信客户端怎么切换账号</a></dt>
<dd class="cont1">在微信客户端实现账号切换的完整指南 对于很多朋友来说，一个微信账号或许已无法满足工作和生活的多重社交需求。好在微信客户端提供了便捷的账号切换功能，让你在不同身份间自如转换。今天，就让我们来一步步拆解这个操作，过程其实比你想的还要简单。 微信客户端如何切换账号 首先，确保你的手机已经安装并登录了微信。</dd>
<dd class="cont2">
<!--<span class="cont1"><img src="zrimages/example/img10.png"/>山外的鸭子哥</span>-->
<span class="cont2"><b></b>8分钟前</span>
<span class="cont4"><b></b>0</span>
</dd>
</dl>
</li>
<li>
<a href="https://www.zhengruan.com/news/626932" class="img1" title="蚂蚁庄园今日答案汇总2月5日 蚂蚁庄园小课堂今日答案最新2.5">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260421/177677574237484.jpg" alt="蚂蚁庄园今日答案汇总2月5日 蚂蚁庄园小课堂今日答案最新2.5">
<span>正版软件</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/626932" title="蚂蚁庄园今日答案汇总2月5日 蚂蚁庄园小课堂今日答案最新2.5" class="aBlack">蚂蚁庄园今日答案汇总2月5日 蚂蚁庄园小课堂今日答案最新2.5</a></dt>
<dd class="cont1">问题一：少喝水能帮肾脏“减负”吗？ 答案是：恰恰相反，绝对不能。 作为经常跟患者打交道的（虚构）健康顾问，我发现这是个流传很广的误区。很多人觉得，少喝点水，肾脏不就没事干、能歇歇了吗？其实啊，这个想法完全搞反了。 我常打个比方：肾脏就像我们身体里的“净水工厂”，而这个工厂高效率运转的动力，恰恰来自于</dd>
<dd class="cont2">
<!--<span class="cont1"><img src="zrimages/example/img10.png"/>山外的鸭子哥</span>-->
<span class="cont2"><b></b>9分钟前</span>
<span class="cont4"><b></b>0</span>
</dd>
</dl>
</li>
<li>
<a href="https://www.zhengruan.com/news/626931" class="img1" title="如何解除微信和浏览器的数据关联">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260421/177677574261329.jpg" alt="如何解除微信和浏览器的数据关联">
<span>正版软件</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/626931" title="如何解除微信和浏览器的数据关联" class="aBlack">如何解除微信和浏览器的数据关联</a></dt>
<dd class="cont1">解除微信与浏览器数据关联，这几步是关键 不知道你有没有这样的体验：在微信里浏览过的小程序、看过的文章，转头就在浏览器里看到了相关内容推荐。这种感觉，就像是两者在“悄悄交换情报”。无论是出于对个人隐私的保护，还是想理清两者的使用边界，掌握如何解除微信与浏览器的数据关联，确实成了不少人的刚需。下面这份实</dd>
<dd class="cont2">
<!--<span class="cont1"><img src="zrimages/example/img10.png"/>山外的鸭子哥</span>-->
<span class="cont2"><b></b>9分钟前</span>
<span class="cont4"><b></b>0</span>
</dd>
</dl>
</li>
</ul>
</div>
<!--左边 end-->
<!--右边-->
<div class="zrZuoRight">
<!-- <div class="zrBanner"><a href="#"><img src="zrimages/example/img11.png"/></a></div>-->
<div class="zrByddBox">
<div class="zrByddTitle"><span><h2>最新发布</h2></span></div>
<ul class="zrByddList">
<li>
<a href="https://www.zhengruan.com/news/453354" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20250820/175567878615240.jpeg" alt="B站免费入口官网-B站在线观看永久畅享">
<span>1</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/453354" title="B站免费入口官网-B站在线观看永久畅享" class="aBlack">B站免费入口官网-B站在线观看永久畅享</a></dt>
<dd><b></b>244天前</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<a href="https://www.zhengruan.com/news/422461" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20250625/175081749977646.jpg" alt="高德地图是哪个国家开发的？">
<span>2</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/422461" title="高德地图是哪个国家开发的？" class="aBlack">高德地图是哪个国家开发的？</a></dt>
<dd><b></b>300天前</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<a href="https://www.zhengruan.com/news/561969" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260118/176871512359949.png" alt="51漫画高清入口及最新章节更新">
<span>3</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/561969" title="51漫画高清入口及最新章节更新" class="aBlack">51漫画高清入口及最新章节更新</a></dt>
<dd><b></b>93天前</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<a href="https://www.zhengruan.com/news/536426" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20251209/176524417472562.png" alt="拷贝漫画最新官网入口2025">
<span>4</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/536426" title="拷贝漫画最新官网入口2025" class="aBlack">拷贝漫画最新官网入口2025</a></dt>
<dd><b></b>133天前</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<a href="https://www.zhengruan.com/news/85615" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20240224/170876520753083.png" alt="如何找到192.168.0.1登录入口">
<span>5</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/85615" title="如何找到192.168.0.1登录入口" class="aBlack">如何找到192.168.0.1登录入口</a></dt>
<dd><b></b>354天前</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<a href="https://www.zhengruan.com/news/467105" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20250908/175730383917013.jpeg" alt="动漫共和国官网入口在线看">
<span>6</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/467105" title="动漫共和国官网入口在线看" class="aBlack">动漫共和国官网入口在线看</a></dt>
<dd><b></b>225天前</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<a href="https://www.zhengruan.com/news/468495" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20250910/175747123122175.jpeg" alt="yy漫画下拉式免费阅读官网入口">
<span>7</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/468495" title="yy漫画下拉式免费阅读官网入口" class="aBlack">yy漫画下拉式免费阅读官网入口</a></dt>
<dd><b></b>223天前</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<a href="https://www.zhengruan.com/news/454813" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20250822/175585050832839.jpg" alt="2020美团外卖账单报告入口详解">
<span>8</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/454813" title="2020美团外卖账单报告入口详解" class="aBlack">2020美团外卖账单报告入口详解</a></dt>
<dd><b></b>242天前</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<a href="https://www.zhengruan.com/news/441819" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20250803/175420000585213.png" alt="抖音去了外地ip多久会变？ip地址怎么变位置？">
<span>9</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/441819" title="抖音去了外地ip多久会变？ip地址怎么变位置？" class="aBlack">抖音去了外地ip多久会变？ip地址怎么变位置？</a></dt>
<dd><b></b>261天前</dd>
</dl>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="zrRmgzBox" style="margin-top:20px;">
<div class="zrByddTitle">
<span><h2>相关推荐</h2></span>
</div>
<ul class="zrXwdtList">
<li><a href="https://www.zhengruan.com/news/626944" title="微信聊天图片无法发送怎么办" class="aBlack">微信聊天图片无法发送怎么办</a></li>
<li><a href="https://www.zhengruan.com/news/626943" title="微博怎么设置账号绑定安全" class="aBlack">微博怎么设置账号绑定安全</a></li>
<li><a href="https://www.zhengruan.com/news/626942" title="蚂蚁庄园今日答案汇总3月18日 蚂蚁庄园小课堂今日答案最新3.18" class="aBlack">蚂蚁庄园今日答案汇总3月18日 蚂蚁庄园小课堂今日答案最新3.18</a></li>
<li><a href="https://www.zhengruan.com/news/626939" title="抖音拍视频怎么赚钱" class="aBlack">抖音拍视频怎么赚钱</a></li>
<li><a href="https://www.zhengruan.com/news/626934" title="哪里找QQ邮箱账号登录入口" class="aBlack">哪里找QQ邮箱账号登录入口</a></li>
<li><a href="https://www.zhengruan.com/news/626933" title="微信客户端怎么切换账号" class="aBlack">微信客户端怎么切换账号</a></li>
<li><a href="https://www.zhengruan.com/news/626932" title="蚂蚁庄园今日答案汇总2月5日 蚂蚁庄园小课堂今日答案最新2.5" class="aBlack">蚂蚁庄园今日答案汇总2月5日 蚂蚁庄园小课堂今日答案最新2.5</a></li>
<li><a href="https://www.zhengruan.com/news/626931" title="如何解除微信和浏览器的数据关联" class="aBlack">如何解除微信和浏览器的数据关联</a></li>
<li><a href="https://www.zhengruan.com/news/626930" title="蚂蚁庄园今日答案汇总3月16日 蚂蚁庄园小课堂今日答案最新3.16" class="aBlack">蚂蚁庄园今日答案汇总3月16日 蚂蚁庄园小课堂今日答案最新3.16</a></li>
</ul>
</div>
<div class="zrRmgzBox" style="margin-top:30px;">
<div class="zrByddTitle">
<span><h2>热门关注</h2></span>
</div>
<ul class="zrRmgzList">
<li>
<span><a href="https://www.zhengruan.com/product/19" title="Xshell 6 简体中文"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/3c06ff5d8d3a8b234a536d602bcc0477.jpg" alt="Xshell 6 简体中文"></a></span>
<dl>
<dt><a href="https://www.zhengruan.com/product/19" title="Xshell 6 简体中文" class="aBlack">Xshell 6 简体中文</a></dt>
<dd class="unstar unstar5"></dd>
<dd class="cont1">￥899.00-￥1149.00</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<span><a href="https://www.zhengruan.com/product/48" title="DaVinci Resolve Studio 16 简体中文"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/60b5be77e7fc0ffb073d36675dc61585.jpg" alt="DaVinci Resolve Studio 16 简体中文"></a></span>
<dl>
<dt><a href="https://www.zhengruan.com/product/48" title="DaVinci Resolve Studio 16 简体中文" class="aBlack">DaVinci Resolve Studio 16 简体中文</a></dt>
<dd class="unstar unstar5"></dd>
<dd class="cont1">￥2550.00-￥2550.00</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<span><a href="https://www.zhengruan.com/product/47" title="Camtasia 2019 简体中文"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/537cf14c8ab78e3bca0cfe8e91c8b683.jpg" alt="Camtasia 2019 简体中文"></a></span>
<dl>
<dt><a href="https://www.zhengruan.com/product/47" title="Camtasia 2019 简体中文" class="aBlack">Camtasia 2019 简体中文</a></dt>
<dd class="unstar unstar5"></dd>
<dd class="cont1">￥689.00-￥689.00</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<span><a href="https://www.zhengruan.com/product/35" title="Luminar 3 简体中文"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/d253cca5f121bda501d04debdf3a4fa2.jpg" alt="Luminar 3 简体中文"></a></span>
<dl>
<dt><a href="https://www.zhengruan.com/product/35" title="Luminar 3 简体中文" class="aBlack">Luminar 3 简体中文</a></dt>
<dd class="unstar unstar5"></dd>
<dd class="cont1">￥288.00-￥288.00</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<span><a href="https://www.zhengruan.com/product/49" title="Apowersoft 录屏王 简体中文"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20200428/c61fdff8f15649063e6b2617c8aa96fb.jpg" alt="Apowersoft 录屏王 简体中文"></a></span>
<dl>
<dt><a href="https://www.zhengruan.com/product/49" title="Apowersoft 录屏王 简体中文" class="aBlack">Apowersoft 录屏王 简体中文</a></dt>
<dd class="unstar unstar5"></dd>
<dd class="cont1">￥129.00-￥339.00</dd>
</dl>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
<!--右边 end-->
<div class="clear"></div>
</div>
<!--主体 end-->
<!--底部-->
<!--底部-->
<div class="zrFoot">
<div class="zrFootIn">
<div class="zrFootMsg">网站备案号：
<a href="https://beian.miit.gov.cn/" target="" style="text-decoration: none;">
<font color="#9b9db0">苏ICP备2026018738号-1 联系邮箱：zhengruancom@outlook.com<br>
Copyright ©2018-2020</font>
</a>
</div>
</div>
</div>
<!--底部 end-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?2f243b178fc8c70f194fc14781f06522";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!--底部 end-->
<script>
function countView(){
$.ajax({
type: "post",
url: "/countView?&time="+new Date().getTime(),
data:{'type':'news','id':"626570"},
async:false,
dataType: "json",
success: function(result){
console.log(result)
},
error:function(){
}
});
}
function code_highlight() {
SyntaxHighlighter.all()
}
$(function(){
code_highlight();
countView();
$("#qrcode").qrcode({width:150,height:150,text:"https://m.zhengruan.com/news/626570"})
})
</script>
</body>
</html>
现在，开始添加核心的图片代码。这里使用标签来引入图片，这是最基本的一步。
代码里的几个属性很关键：src指明了图片在项目中的存放路径，可别写错了；id则给这个图片打上了一个独特的标记，我们后面会通过这个标记告诉CSS和Ja vaScript：“嘿，就是这张图，把它变成背景！”
图片放好了，但它现在还是个普通的图片元素。要让它变成全屏背景，得靠样式和逻辑来控制。把目光移到网页的头部，找到
部分，在