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/news/soft69" 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/news/soft69" title="立即购买>">立即购买></a></em>
</span>
</div>
<div class="zrTxdmIn4">
<dl>
<dt><a href="https://www.zhengruan.com/news/soft69" 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/news/soft67" 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/news/soft67" title="立即购买>">立即购买></a></em>
</span>
</div>
<div class="zrTxdmIn4">
<dl>
<dt><a href="https://www.zhengruan.com/news/soft67" 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/news/soft68" 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/news/soft68" title="立即购买>">立即购买></a></em>
</span>
</div>
<div class="zrTxdmIn4">
<dl>
<dt><a href="https://www.zhengruan.com/news/soft68" 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/news/soft29" 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/news/soft29" title="立即购买>">立即购买></a></em>
</span>
</div>
<div class="zrTxdmIn4">
<dl>
<dt><a href="https://www.zhengruan.com/news/soft29" 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/753711" class="img1" title="vivo手机蓝屏出现英文Press any key怎么办">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/178704345218857.webp" alt="vivo手机蓝屏出现英文Press any key怎么办">
<span>正版软件</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/753711" title="vivo手机蓝屏出现英文Press any key怎么办" class="aBlack">vivo手机蓝屏出现英文Press any key怎么办</a></dt>
<dd class="cont1">当vivo手机出现蓝屏并显示“Press any key to shutdown”时，这表明手机处于fastboot或recovery异常状态。此时，我们需要先确认具体模式，再采取针对性的操作。如果是fastboot异常，可长按电源键+音量下键12秒来断电重启；若手机通过USB连接，需先拔掉数据线，</dd>
<dd class="cont2">
<!--<span class="cont1"><img src="zrimages/example/img10.png"/>山外的鸭子哥</span>-->
<span class="cont2"><b></b>9小时前 16:57</span>
<span class="cont4"><b></b>0</span>
</dd>
</dl>
</li>
<li>
<a href="https://www.zhengruan.com/news/753710" class="img1" title="vivo手机怎么查看别人发来的定位">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/178704341149308.webp" alt="vivo手机怎么查看别人发来的定位">
<span>正版软件</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/753710" title="vivo手机怎么查看别人发来的定位" class="aBlack">vivo手机怎么查看别人发来的定位</a></dt>
<dd class="cont1">vivo手机想查看微信、信息、QQ的定位，得手动来操作哦。微信呢，点击位置气泡就会自动跳到地图啦；信息的话，要点击链接或者把链接复制粘贴到浏览器里去访问；QQ则是先点击位置卡片，然后选择“在地图中查看”。不过要注意哈，必须得确保地图权限是开启的，相关应用也都安装好了，而且QQ得是最新版才行。您有没有</dd>
<dd class="cont2">
<!--<span class="cont1"><img src="zrimages/example/img10.png"/>山外的鸭子哥</span>-->
<span class="cont2"><b></b>9小时前 16:56</span>
<span class="cont4"><b></b>0</span>
</dd>
</dl>
</li>
<li>
<a href="https://www.zhengruan.com/news/753709" class="img1" title="每日记手机版设置启用日记云同步的方法">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/178704340454386.webp" alt="每日记手机版设置启用日记云同步的方法">
<span>正版软件</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/753709" title="每日记手机版设置启用日记云同步的方法" class="aBlack">每日记手机版设置启用日记云同步的方法</a></dt>
<dd class="cont1">每日记APP功能简洁实用，深受不少用户喜爱。在这款应用里，用户既能轻松记录日常生活中的点滴趣事，又能整理归档工作安排、学习计划等重要事项。为确保多设备间数据的一致性，软件内置云同步机制，可有效避免因更换手机或平板登录同一账号时，笔记内容出现不同步、重复或丢失等问题。用户只需进入设置界面，开启“日记云</dd>
<dd class="cont2">
<!--<span class="cont1"><img src="zrimages/example/img10.png"/>山外的鸭子哥</span>-->
<span class="cont2"><b></b>9小时前 16:56</span>
<span class="cont4"><b></b>0</span>
</dd>
</dl>
</li>
<li>
<a href="https://www.zhengruan.com/news/753708" class="img1" title="有道云笔记手机版设置关闭仅在WiFi连接时下载的方法">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/178704339131224.webp" alt="有道云笔记手机版设置关闭仅在WiFi连接时下载的方法">
<span>正版软件</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/753708" title="有道云笔记手机版设置关闭仅在WiFi连接时下载的方法" class="aBlack">有道云笔记手机版设置关闭仅在WiFi连接时下载的方法</a></dt>
<dd class="cont1">有道云笔记APP是一款超高效实用的笔记工具，界面简洁直观，功能那叫一个丰富，PDF格式转换、录音笔记、待办事项创建等统统不在话下。而且，用户还能把常用文档离线下载到本地，没网也能随时查阅。不过呢，有些用户反映在移动数据网络下没法下载文件夹内容，这多半是因为系统默认开启了“仅在WiFi连接时下载”的限</dd>
<dd class="cont2">
<!--<span class="cont1"><img src="zrimages/example/img10.png"/>山外的鸭子哥</span>-->
<span class="cont2"><b></b>9小时前 16:56</span>
<span class="cont4"><b></b>0</span>
</dd>
</dl>
</li>
<li>
<a href="https://www.zhengruan.com/news/753707" class="img1" title="葫芦侠下载安装最新版本 葫芦侠安卓版官方下载">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/178704333244824.webp" alt="葫芦侠下载安装最新版本 葫芦侠安卓版官方下载">
<span>正版软件</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/753707" title="葫芦侠下载安装最新版本 葫芦侠安卓版官方下载" class="aBlack">葫芦侠下载安装最新版本 葫芦侠安卓版官方下载</a></dt>
<dd class="cont1">截至2026年8月12日，葫芦侠官网安卓正式版为v4.94.99.86（143.75MB，8月3日发布），需从huluxia.com直链下载APK，开启“未知来源”安装权限，并校验package值为com.huluxia.gametools方可安全安装使用。想在安卓手机上安装最新版葫芦侠最新正式版，</dd>
<dd class="cont2">
<!--<span class="cont1"><img src="zrimages/example/img10.png"/>山外的鸭子哥</span>-->
<span class="cont2"><b></b>9小时前 16:55</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/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>1</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/467105" title="动漫共和国官网入口在线看" class="aBlack">动漫共和国官网入口在线看</a></dt>
<dd><b></b>345天前</dd>
</dl>
<div class="clear"></div>
</li>
<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>2</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/453354" title="B站免费入口官网-B站在线观看永久畅享" class="aBlack">B站免费入口官网-B站在线观看永久畅享</a></dt>
<dd><b></b>4天前</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>5天前</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>5天前</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>5</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/422461" title="高德地图是哪个国家开发的？" class="aBlack">高德地图是哪个国家开发的？</a></dt>
<dd><b></b>420天前</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>6</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>12小时前 13:45</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>昨天 08-17 19:17</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<a href="https://www.zhengruan.com/news/533808" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20251205/176490289339265.png" alt="天堂漫画网页版登录入口及访问指南">
<span>8</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/533808" title="天堂漫画网页版登录入口及访问指南" class="aBlack">天堂漫画网页版登录入口及访问指南</a></dt>
<dd><b></b>5天前</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<a href="https://www.zhengruan.com/news/555893" class="img">
<img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260109/176795304738779.png" alt="ACfun回家官网入口-acfun网页版免费入口">
<span>9</span>
</a>
<dl>
<dt><a href="https://www.zhengruan.com/news/555893" title="ACfun回家官网入口-acfun网页版免费入口" class="aBlack">ACfun回家官网入口-acfun网页版免费入口</a></dt>
<dd><b></b>221天前</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/753711" title="vivo手机蓝屏出现英文Press any key怎么办" class="aBlack">vivo手机蓝屏出现英文Press any key怎么办</a></li>
<li><a href="https://www.zhengruan.com/news/753710" title="vivo手机怎么查看别人发来的定位" class="aBlack">vivo手机怎么查看别人发来的定位</a></li>
<li><a href="https://www.zhengruan.com/news/753709" title="每日记手机版设置启用日记云同步的方法" class="aBlack">每日记手机版设置启用日记云同步的方法</a></li>
<li><a href="https://www.zhengruan.com/news/753708" title="有道云笔记手机版设置关闭仅在WiFi连接时下载的方法" class="aBlack">有道云笔记手机版设置关闭仅在WiFi连接时下载的方法</a></li>
<li><a href="https://www.zhengruan.com/news/753707" title="葫芦侠下载安装最新版本 葫芦侠安卓版官方下载" class="aBlack">葫芦侠下载安装最新版本 葫芦侠安卓版官方下载</a></li>
<li><a href="https://www.zhengruan.com/news/753706" title="联合早报首页官网直达入口 联合早报首页官方网址" class="aBlack">联合早报首页官网直达入口 联合早报首页官方网址</a></li>
<li><a href="https://www.zhengruan.com/news/753705" title="希望学APP官方最新版本更新内容有哪些？新功能与优化一览" class="aBlack">希望学APP官方最新版本更新内容有哪些？新功能与优化一览</a></li>
<li><a href="https://www.zhengruan.com/news/753704" title="联合早报首页官网链接 联合早报首页入口地址" class="aBlack">联合早报首页官网链接 联合早报首页入口地址</a></li>
<li><a href="https://www.zhengruan.com/news/753703" title="vivo手机天气预报怎么精确定位？定位服务开启指南" class="aBlack">vivo手机天气预报怎么精确定位？定位服务开启指南</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/news/soft751849" title="Nero AI Video Upscaler"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/1d40c31075948560ed935d2e3d56090e.png" alt="Nero AI Video Upscaler"></a></span>
<dl>
<dt><a href="https://www.zhengruan.com/news/soft751849" title="Nero AI Video Upscaler" class="aBlack">Nero AI Video Upscaler</a></dt>
<dd class="unstar unstar5"></dd>
<dd class="cont1">￥27.30-￥39.00</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<span><a href="https://www.zhengruan.com/news/soft752335" title="DockFlow"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/3314d6a3a529cdd07e7d98ca354f2d96.png" alt="DockFlow"></a></span>
<dl>
<dt><a href="https://www.zhengruan.com/news/soft752335" title="DockFlow" class="aBlack">DockFlow</a></dt>
<dd class="unstar unstar5"></dd>
<dd class="cont1">￥45.00-￥45.00</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<span><a href="https://www.zhengruan.com/news/soft752115" title="远离手机"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/e0bf711581ddf424af3e6f57a3b4a5b4.png" alt="远离手机"></a></span>
<dl>
<dt><a href="https://www.zhengruan.com/news/soft752115" title="远离手机" class="aBlack">远离手机</a></dt>
<dd class="unstar unstar4"></dd>
<dd class="cont1">￥10.00-￥10.00</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<span><a href="https://www.zhengruan.com/news/soft752094" title="Trym"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/a2d5b426023aa052acd1dbfe2be80b3b.png" alt="Trym"></a></span>
<dl>
<dt><a href="https://www.zhengruan.com/news/soft752094" title="Trym" class="aBlack">Trym</a></dt>
<dd class="unstar unstar4"></dd>
<dd class="cont1">￥19.00-￥19.00</dd>
</dl>
<div class="clear"></div>
</li>
<li>
<span><a href="https://www.zhengruan.com/news/soft745466" title="Scherlokk"><img onerror="this.src='https://www.zhengruan.com/statics/www/zrimages/404_bg.png'" src="https://www.zhengruan.com/uploads/20260818/dd46fdde7e4cc7871de3a661885b41f5.png" alt="Scherlokk"></a></span>
<dl>
<dt><a href="https://www.zhengruan.com/news/soft745466" title="Scherlokk" class="aBlack">Scherlokk</a></dt>
<dd class="unstar unstar4"></dd>
<dd class="cont1">￥99.00-￥99.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 联系邮箱：bd@zhengruan.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?3835539565b311d85319cd21da8fd0d9";
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：“嘿，就是这张图，把它变成背景！”
图片放好了，但它现在还是个普通的图片元素。要让它变成全屏背景，得靠样式和逻辑来控制。把目光移到网页的头部，找到
部分，在