Web图像技术：前端引入图片的各种方式及其优缺点

前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是标签，或者是通过CSS background 属性，还可以使用 SVG。选择正确的方式是很重要的，它对性能和可访问性有很大的影响。

10年积累的成都网站建设、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有桦川免费网站建设让你可以放心的选择与我们合作。

在本文中，我们会学习引入图像的各种方式，以及每种方式的优点和缺点，以及何时使用和为什么使用它们。

HTML img 元素

最简单的情况下，img元素必须包含src属性:

设置宽度和高度属性

在页面加载时，它们会在页面图像加载时发生一些布局变化。为了避免这种情况，我们可以为它设置width和height属性:

虽然对某些人来说，这可能看起来太过简单了，但它是有用的。我们用图例的方式来理清这个概念：

我们看到到右侧图片即使尚未加载仍保留了空间?那是因为设置了宽度和高度。

通过 CSS 隐藏图像

图像可以用 CSS 隐藏。但是，它仍将加载在页面中。因此，在执行此操作时请小心。如果一个图像应该被隐藏，那么它可能是出于装饰的目的。

 
 
 
 
  
  
  
  img {   
  
  
      display: none;   
  
  
  }

同样，上面的方法也不能阻止浏览器加载图像，即使它在视觉上是隐藏的。原因是被认为是一个被替换的元素，所以我们无法控制它所加载的内容。

可访问性问题

通过将alt属性设置为有意义的描述，用来访问 HTML 图像，这对于屏幕阅读器用户非常有帮助。

然而，如果一个alt描述是不需要的，请不要删除它，如果你这样做，图像src将被读出,这对可访问性非常不利。

不仅如此，如果图像因为某种原因没有加载，并且它有一个清晰的alt，它将作为一个回退显示。同样通过图例来演示一下。

假设我们有以下图片：

当src无效，图片没有加载时。第一个没有alt属性，而第二个是空的alt属性，下面是它们的视觉效果：

没有alt的图片仍然保留了它的空间，这很混乱，而且不利于访问。而另一个alt为空的图片，会折叠起来看起来像一个小点，这里因为它有边框。

但是，当alt属性有值，它看起来是这样的：

这不是一个很好的反馈吗?此外，当图像源失败时，可以向它们添加伪元素。

响应式图像

的优点在于可以针对特定视口大小将其扩展为具有多个版本的照片。我们有两种不同的方式来生成一组响应式图像：

1.srcset属性

这很简单。对我来说，srcset可以根据屏幕宽度显示多个图像尺寸，这并不是一种完美的解决方案。它让浏览器选择合适的图像，而我们对此无能为力。

2.picture 标签

另一种选择是使用元素。我更喜欢这种方式，因为它更容易预测。

事例源码：https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100

调整图像大小

对于，我们还可以使用的一组很好的特性object-fit和object-position。它们可以控制的大小和定位，就像CSS背景图像。

object-fit 值有：fill, contain, cover, none, scale-down。例如：

 
 
 
 
  
  
  
  img {   
  
  
      object-fit: cover;   
  
  
      object-position: 50% 50%;   
  
  
  }

CSS背景图片

使用CSS背景显示图像时，它需要一个具有内容或特定宽度或高度的元素。通常，背景图像的主要用途应该是用于装饰目的。

何使用 CSS 背景图片

首先，我们需要一个元素

 
 
 
 
  
  
  
  // html   
  
  
  Some content

// css

.element {

background: url('cool.jpg');

}

多个背景

使用CSS背景图片的好处是可以设置多个背景。考虑以下示例：

 
 
 
 
  
  
  
  .element {   
  
  
      background: url('cool-1.jpg'), url('cool-2.jpg');   
  
  
  }

隐藏图像

我们可以在特定视口中隐藏和显示图像，如果未使用CSS设置图片，则不会下载该图片。与使用相比，这是一个额外的好处。

在上面的示例中，我们有一个背景图像，仅在视口宽度大于700px时显示。

可访问性问题

如果使用不当，背景图像可能会影响可访问性。例如，将其用于文章主题，这对于文章至关重要。

非开发人员无法下载

普通人知道，如果要保存图像，只需单击鼠标左键，然后选择保存即可。CSS　背景图片并非如此，我们必须先检查元素，然后在DevTools中的url中打开链接，然后才能下载随CSS添加的图像。

伪元素

可以将伪元素与CSS背景图像一起使用，例如在图像顶部显示覆盖图。对于这是不可能的，直到我们为叠加层添加单独的元素。

SVG Image

SVG被认为是一种图像，它比较大的功能是在不影响质量的情况下进行缩放。此外，使用SVG，我们可以嵌入JPG、PNG或SVG图像。参见下面的 HTML:

你是否注意到了prepareAspectRatio?它的作用是可以让图像占据SVG的整个宽度和高度，而不会被拉伸或压缩。

当宽度较大时，它将填充其父级(SVG)宽度而不会拉伸。

这非常类似于 CSS 中的object-fit: cover或background-size: cover。

可访问性问题

关于SVG 的可访问性，这使我想起了元素。例如，我们可以像下面这样添加它：</p><p>我们还可以使用元素 </p><p><strong>非开发人员无法下载</strong></p><p>必须先检查元素并复制图像的URL，然后才能下载嵌入SVG的图像。但是，如果我们要防止用户下载特定的图像，这可能是一件好事。</p><p><strong>用例</strong></p><p><strong>Hero Section</strong></p><p>在构建hero section时，有时我们需要在标题和其他内容下方的图像。参见下图：</p><p>一些要求：</p><ul><li>背景图片能够动态替换</li><li>图片有一个覆盖层，让阅读更容易</li><li>图像有三种尺寸:小号、中号和大号。每一个都是针对一个特定的视口。</li></ul> <p>在开始解决方案之前，让我们先问问自己这种背景的性质。这是一些入门问题：</p><ol> <li>为用户保留这个图像很重要吗，还是可以跳过它?</li><li>我们是否需要在所有视口尺寸上使用它?</li><li>它是静态的还是动态变化的?</li></ol><p><strong>解决方案1</strong></p><p>通过使用多个CSS背景，我们可以将一个背景作为叠加层，将另一个背景作为实际图像。请看下面的CSS：</p><pre> <ol> <li>.hero { </li> <li> background-image: linear-gradient(rgba(0, 0, 0, 0.4), </li> <li> rgba(0, 0, 0, 0.4)), var('landscape.jpg'); </li> <li> background-repeat: no-repeat; </li> <li> background-size: 100%, cover; </li> <li>} </li> </ol></pre><p>虽然此解决方案有效，但可以使用 JavaScript 动态更改背景图片。见下面：</p><pre> <ol> <li><section class="hero" </li> <li> style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');"> </li> <li>  </li> <li></section> </li> </ol></pre><p>这里添加了一个内联样式。虽然这是可行的，但它看起来很丑，而且不实用。</p><p>也许我们可以使用CSS变量?让我们来探索一下。</p><pre> <ol> <li><section class="hero" style="--bg-url: url('landscape.jpg')"> </li> <li>  </li> <li></section> </li> </ol></pre><p>现在，我们可以轻松地更新--bg-url变量来动态更改背，这比内联的东西好一百万倍。</p><p>小结：</p><ol> <li>这种方案只有在图片不重要才适用</li><li>这种方案只适合一些静态网站，因为没有从后台拉取图片</li></ol><p>事例源码：https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522</p><p><strong>解决方案2</strong></p><p>该方案是可以使用一个 img 标签：</p><pre> <ol> <li><section class="hero"> </li> <li> <h2 class="hero__title">Using Images in CSS</h2> </li> <li> <p class="hero__desc">An article about which and when to use</p> </li> <li> <img src="landscape.jpg" alt=""> </li> <li></section> </li> </ol></pre><p>在CSS中，我们需要将图片绝对定位在内容下方，并且还需要使用伪元素作为叠加层。</p><p>此解决方案的优点在于，可以轻松更改图片的src属性。同样，如果图像很重要，它将会更加有用。</p><p>另外，我喜欢使用HTML 的功能是能够在未加载图片的情况下添加回退。回退至少可以使内容保持可读性。</p><pre> <ol> <li>.hero img { </li> <li> /* Other styles */ </li> <li> background: #2962ff; </li> <li> } </li> </ol></pre><p>在图片源路径不对时，背景颜色是一个代替方面。</p><p>事例源码：https://codepen.io/shadeed/pen/73a2ca78141fcab39d6db9d5bd982728?editors=1100</p><p><strong>网站 Logo</strong></p><p>网站 Logo是很重要的，因为它可以将网站与其他网站区分开。要嵌入徽标，我们有一些选择：</p><ul><li>img -> png,jpg, orsvg</li><li>内联SVG</li><li>背景图</li></ul> <p>接下来，我们来看看哪种方式更合适。</p><p><strong>带有很多细节的 Logo</strong></p><p>当徽标具有许多细节或形状时，将其用作嵌入式SVG可能没有好处。我建议使用，图像类型可以是png，jpg或svg。</p><p><strong>需要动画的简单 Logo</strong></p><p>我们有一个简单的logo ，其中包含形状和文字。悬停时，形状和文本需要更改颜色。怎么做?对我来说比较好的解决方案是使用嵌入式SVG。</p><p><strong>HTML</strong></p><p><strong>CSS</strong></p><pre> <ol> <li>.logo rect, </li> <li>.logo text { </li> <li> transition: 0.3s ease-out; </li> <li>} </li> <li> </li> <li>.logo:hover rect, </li> <li>.logo:hover text { </li> <li> fill: #4a7def; </li> <li>} </li> </ol></pre><p>事例源码：https://codepen.io/shadeed/pen/4005077cc543647148007f4834c0585c?editors=0100</p><p><strong>响应 Logo</strong></p><p>这让我想起了Smashing Magazine的logo。我喜欢它从一个小图标变成一个完整的徽标。参见下面的模型：</p><p>优秀的解决方案是使用元素，可以在其中添加logo 的两个版本。如下所示： </p><pre> <ol> <li><a class="logo" href="/"> </li> <li> <picture> </li> <li> <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"> </li> <li> <img src="sm-logo.svg" alt="Smashing Magazine"> </li> <li> </picture> </li> <li> </a> </li> </ol></pre><p>在CSS中，我们需要将视口的宽度更改为等于或大于1350px。</p><pre> <ol> <li>.logo { </li> <li> display: inline-block; </li> <li> width: 45px; </li> <li>} </li> <li> </li> <li>@media (min-width: 1350px) { </li> <li> .logo { </li> <li> width: 180px; </li> <li> } </li> <li>} </li> </ol></pre><p>这是简单而直接的解决方案。</p><p>事例源码：https://codepen.io/shadeed/pen/6cf55d4e87b7c443820bd5f8694587a8?editors=1100</p><p><strong>带有渐变的Logo</strong></p><p>当 logo 具有渐变时，从Illustrator或Sketch等设计应用程序将其导出的过程可能并不优秀，有时会中断。</p><p>使用SVG，我们可以轻松地为logo添加渐变。我添加了并将其用作文本填充。 </p><p>事例源码：https://codepen.io/shadeed/pen/9bf3bee3d08a40411effb5d65f25b5c1?editors=1100</p><p><strong>用户头像</strong></p><p>对于用户头像，它们具有很多形状，但最常见的是矩形或圆形。在此用例中，会介绍一个对你有用的重要技巧。</p><p>首先，让我们看下面的模型。请注意，我们有一个优秀的化身，并且100%清晰。</p><p>但是，当用户上传半白色头像或非常浅的头像时，这个设计就不太好了。</p><p>请注意，在上面的模型中，除非真正专注看，否则尚不清楚其中是否有一个圆圈。这是一个问题。为了解决这个问题，我们应该在头像内添加边框，以防图像太亮看不清除。</p><p>我们有几个选择</p><ul><li>img元素</li><li>img 和 div 元素</li><li>div与CSS背景</li><li>SVG image</li></ul> <p>哪一个比较好?我们来探索探索。</p><p><strong>使用 HTML `<img>`</strong></p><p>你可能首先想到的是添加一个边框，对吧?让我们来探讨一下这个问题。</p><pre> <ol> <li>.avatar { </li> <li> border: 2px solid #f2f2f2; </li> <li>} </li> </ol></pre><p>我们的目标是使内部边框与图像融合在一起，这种不太实用。</p><p><strong>使用 `<img>` 和 `<div>` 元素</strong></p><p>现在的问题是，要添加内部边框，我们不能使用box-shadow，因为它无法在图像上使用。解决方案用</p><p> 包裹头像中，并添加专用于内部边框的元素。 </p><p><strong>HTML</strong></p><pre> <ol> <li><strong><div class="avatar-wrapper"> </strong></li> <li><strong> <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed"> </strong></li> <li><strong> <div class="avatar-border"></div> </strong></li> <li><strong></div> </strong></li> </ol></pre><p><strong>CSS</strong> </p><pre> <ol> <li>.avatar-wrapper { </li> <li> position: relative; </li> <li> width: 150px; </li> <li> height: 150px; </li> <li>} </li> <li> </li> <li>.avatar-border { </li> <li> position: absolute; </li> <li> left: 0; </li> <li> top: 0; </li> <li> width: 100%; </li> <li> height: 100%; </li> <li> border-radius: 50%; </li> <li> border: 2px solid rgba(0, 0, 0, 0.1); </li> <li>} </li> </ol></pre><p>通过在<div>上使用透明度10%黑色的边框，我们可以确保边框与深色图像融合，并且只有在图像较亮的情况下才可见。参见下面的模型：</p><p>事例地址：https://codepen.io/shadeed/pen/da23d9a18dac14692a97e1bc6e86a5ff?editors=1100</p><p><strong>使用`<div>`与CSS背景</strong></p><p>如果我要使用<div>来显示头像，则可能表示该图像具有装饰性。我记得一个用例，它是分散在页面中的随机头像。</p><p><strong>HTML</strong></p><pre> <ol> <li><div class="avatar" style="--img-url: url(shadeed2.jpg)"></div> </li> </ol></pre><p><strong>CSS</strong></p><pre> <ol> <li>.avatar { </li> <li> background: var(--img-url) center/cover; </li> <li> width: 150px; </li> <li> height: 150px; </li> <li> border-radius: 50%; </li> <li> box-shadow: inset 0 0 0 2px rgba(#000, 0.1); </li> <li>} </li> </ol></pre><p>事例地址:https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100</p><p><strong>使用 SVG ``</strong></p><p>对我来说，这是最有趣的解决方案。我在检查Facebook的新设计时注意到了它。</p><p>先对其进行剖析，它包含以下内容：</p><ul><li>用于将图像剪切为圆形(circle )的蒙版(mask )</li><li>对其应用了蒙版的组</li><li>image本身带有preserveAspectRatio =“ xMidYMid”</li><li>用于内边界的圆</li></ul> <pre> <ol> <li>circle { </li> <li> stroke-width: 2; </li> <li> stroke: rgba(0, 0, 0, 0.1); </li> <li> fill: none; </li> <li>} </li> </ol></pre><p>事例地址：https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100</p> <br> 新闻名称：Web图像技术：前端引入图片的各种方式及其优缺点 <br> 路径分享：<a href="http://zjjierui.cn/article/dpichgg.html">http://zjjierui.cn/article/dpichgg.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/codispp.html">进程和子进程及端口的常用命令</a> </li><li> <a href="/article/codiedp.html">SQL语句中UPDATE的三种用法</a> </li><li> <a href="/article/codisod.html">如何有效地管理Linux系统的时间？（linux时间管理）</a> </li><li> <a href="/article/codiesi.html">处理器微结构史话</a> </li><li> <a href="/article/codisjo.html">域名解析必须要实名认证吗（域名解析必须要实名认证吗安全吗）</a> </li> </ul> </div> </div> <div class="f_service_con"> <div class="h_fumin"> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service01.png"></div> <p>售后响应及时</p><span>7×24小时客服热线</span> </div> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service02.png"></div> <p>数据备份</p><span>更安全、更高效、更稳定</span> </div> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service03.png"></div> <p>价格公道精准</p><span>项目经理精准报价不弄虚作假</span> </div> <div class="h_fumin_lei"> <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service04.png"></div> <p>合作无风险</p><span>重合同讲信誉，无效全额退款</span> </div> </div> </div> <div class="footerbar"> <div class="footer-t"> <div class="f-box"> <div class="f-1"> <div class="f-t"> <h2>联系我们</h2> <span>TEL</span> </div> <div class="f-b"> <h1><a href="tel:13518219792" rel="nofollow">135-1821-9792</a></h1> <h1><a href="tel:028-86922220" rel="nofollow">028-86922220</a></h1> <p>地址：成都市太升南路288号锦天国际</p> </div> </div> <div class="f-2"> <div class="f-t"> <h2>快捷导航</h2> <span>Shortcut</span> </div> <div class="f-b"> <ul > </ul> <ul > <li><a href="/jianshe" title="广元网站建设">广元网站建设</a></li> <li><a href="/jianshe#ym_websiteBox2" title="品牌网站建设">品牌网站建设</a></li> <li><a href="/jianshe#ym_websiteBox1" title="企业网站建设">企业网站建设</a></li> <li><a href="/jianshe#ym_websiteBox4" title="集团网站建设">集团网站建设</a></li> <li><a href="/jianshe#ym_websiteBox4_2" title="外贸网站建设">外贸网站建设</a></li> <li><a href="/jianshe#ym_websiteBox4_5" title="企业宣传视频">企业宣传视频</a></li> </ul> <ul > <li><a href="/weixin" title="微信开发">微信开发</a></li> <li><a href="/weixin#item1" title="公众号开发">公众号开发</a></li> <li><a href="/weixin#item2" title="微商城建设">微商城建设</a></li> <li><a href="/weixin#item3" title="微官网建设">微官网建设</a></li> <li><a href="/weixin#item4" title="小程序开发">小程序开发</a></li> </ul> <ul> <li><a href="/case/" title="网站作品案例">网站作品案例</a></li> <li><a href="/case/" title="品牌网站案例">品牌网站案例</a></li> <li><a href="/case/" title="集团网站案例">集团网站案例</a></li> <li><a href="/case/" title="企业网站案例">企业网站案例</a></li> <li><a href="/case/" title="外贸网站案例">外贸网站案例</a></li> <li><a href="/case/" title="营销网站案例">营销网站案例</a></li> </ul> <ul style="margin:0;"> <li><a href="/about/">广元建站</a></li> <li><a href="/about/">公司简介</a></li> <li><a href="/about#ab_item3">企业文化</a></li> <li><a href="/contact">联系我们</a></li> <li><a href="/Pay.html">付款方式</a></li> <li><a href="/jianshe#ym_websiteBox8">售后服务</a></li> </ul> <div style="clear:both;"></div> </div> </div> <div class="f-3"> <div class="f-t"> <h2>二维码</h2> <span>QR CODE</span> </div> <div class="f-b"> <ul> <li><img src="/Public/Home/images/fewm.png"> <p>微信公众号</p> </li> <li style="margin: 0"><img src="/Public/Home/images/fewm2.png"> <p>手机端网站</p> </li> <div style="clear:both;"></div> </ul> </div> </div> <div style="clear:both;"></div> </div> </div> <div class="footer-about"> <div class="w1200">广元优众联杰建站公司是一家专注从事于高品质视觉体验及互联网设计开发，<a href="/" target="_blank">广元网站建设</a>，<a href="/jianshe" target="_blank">广元网站设计</a>，<a href="/jianshe" target="_blank">广元网页设计</a>，<a href="/jianshe" target="_blank">广元网站制作</a>，<a href="/jianshe#ym_websiteBox2" target="_blank">品牌网站建设</a>，<a href="/jianshe#ym_websiteBox3" target="_blank">营销网站建设</a>，<a href="/jianshe#ym_websiteBox4" target="_blank">集团网站建设</a>，<a href="/jianshe#ym_websiteBox1" target="_blank">企业网站建设</a>，<a href="/jianshe#ym_websiteBox4_2" target="_blank">外贸网站建设</a>，<a href="/jianshe#ym_websiteBox4_3" target="_blank">响应式网站建设</a>，<a href="/weixin#item4" target="_blank">小程序开发</a>，<a href="/weixin" target="_blank">微信开发</a>，<a href="/jianshe#ym_websiteBox4_4" target="_blank">企业形象设计</a>，<a href="/jianshe#ym_websiteBox4_5" target="_blank">企业宣传视频</a>等服务，优众联杰建站位于广元市龙岗区大运软件小镇，优众联杰建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。 </div> <div class="friend-links"> <h6 class="clearfix"> <span class="tilte">友情链接</span> <a class="exchagne" href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes">交换友情链接</a> </h6> <div class="link-list clearfix"> <div class="link-slider"> <a href="http://www.bzwzjz.com/" title="专业网站建设" target="_blank">专业网站建设</a> <a href="http://www.cqganxi.cn/" title="凿毛机" target="_blank">凿毛机</a> <a href="http://www.jsozb.com/" title="成都静音发电机公司" target="_blank">成都静音发电机公司</a> <a href="http://www.cdhuace.com/" title="成都广告制作" target="_blank">成都广告制作</a> <a href="https://www.cdxwcx.com/city/nanchong/" title="南充做网站" target="_blank">南充做网站</a> <a href="http://www.jyjourney.com/" title="彭州电动叉车" target="_blank">彭州电动叉车</a> <a href="http://www.cdszcl.cn/" title="顺泽窗帘" target="_blank">顺泽窗帘</a> <a href="http://www.idcguanghua.com/" title="成都IDC光华机房托管" target="_blank">成都IDC光华机房托管</a> <a href="https://www.xwcx.net/tuoguan.html" title="四川电信机房托管" target="_blank">四川电信机房托管</a> <a href="https://www.cdxwcx.com/cloud/" title="云主机" target="_blank">云主机</a> </div> </div> </div> </div> <div class="footer-b"> <div class="f-box"> <ul> <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li> <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li> <li><a href="/about/" target="_blank">联系我们</a></li> <li><a href="https://www.cdxwcx.com/pay/" target="_blank">付款方式</a></li> <li><a href="https://www.cdcxhl.com/menu.html" target="_blank">网站地图</a></li> <li><a href="#" target="_blank">sitemap</a></li> <li> <p> <script data-cfasync="false" src="/Public/Home/js/email-decode.min.js"></script> </p> </li> <div style="clear:both;"></div> </ul> <p class="copy">Copyright © 2025 成都优众联杰科技有限公司广元建站公司 All Rights Reserved <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2024116266号-5</a> <a style="display:none" target="_blank" href="###"><img style="vertical-align:middle" border="0" src="" width="65" height="25" /></a> </p> <div style="clear:both;"></div> </div> </div> <div class="sj_footer"> <div class="f-box"> <ul> <li><a href="/jianshe" target="_blank">网站建设</a></li> <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li> <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li> <li><a href="https://www.cdxwcx.com/pay/" target="_blank">付款方式</a></li> <li><a href="/about/" target="_blank">关于我们</a></li> <li><a href="https://www.cdcxhl.com/menu.html" target="_blank">网站地图</a></li> <div style="clear:both;"></div> </ul> <p class="copy">Copyright © 2025 成都优众联杰科技有限公司广元建站公司 </p> <p class="copy"> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2024116266号-5</a> <a href="###" target="_blank"><img src="/Public/Home/images/govicon.gif" width="20" height="28" border="0" style="border-width:0px;border:hidden; border:none;"></a></p> <div style="clear:both;"></div> </div> </div> </div> <script type='text/javascript' src='/Public/Home/js/qqkefu.js'></script> <div class="qqkefu"> <ul> <li class="qq_czaa" id="130"><b class="a"></b>135-1821-9792</li> <li class="qq_czaa" id="130"><a href="tencent://message/?uin=1683211881"><b class="b"></b>业务咨询QQ</a></li> <li class="qq_czaa" id="130"><a href="javascript:showDiv()"><b class="f"></b>提交合作意向表</a></li> <li class="qq_czb"> <b class="c"></b> <div class="erweima"> <p><img src="/Public/Home/images/right_erweima.png"></p> </div> </li> <li class="top"><span></span></li> </ul> </div> <div id="popDiv" class="mydiv" style="display:none;"> <a class="mydiv_clk" href="javascript:closeDiv()">X</a> <div class="mydiv_list"> <div class="c_f_title"><span class="c_f_t">合作意向表</span></div> <div class="c_f_con"> <form id="form1" name="form1" class="mess_form" method="post" action="/post_order"> <input name='enews' type='hidden' value='AddFeedback'> <input name="bid" value="1" type="hidden"> <input type="hidden" name="ecmsfrom" value="9"> <input type="hidden" name='title' value="客户提交需求"> <li class="c_n"><span>公司名称</span> <dl><input name='gsname' id='gsname' type="text"></dl> </li> <li class="c_n"><span>邮箱</span> <dl><input name='gemail' id='gemail' type="text"></dl> </li> <li class="c_n xmm"> <div class="xmm_01"><span>姓名</span> <dl class="c_n_i"><input name='name' id='name' type="text"></dl> </div> <div class="xmm_01"><span style="text-align:center">电话</span> <dl class="c_n_i"><input name="tel" type="text"></dl> </div> </li> <li class="c_tser">您需要的服务</li> <li class="clearfix"> <dd><label><input type="radio" name='hobby' id='hobby' value="高端网站建设"><span>高端网站建设</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做微信营销"><span>我需要做微信营销</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="要找长期合作，需要年度服务"><span>要找长期合作，需要年度服务</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做购物商城"><span>我需要做购物商城</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="我需要网站改版"><span>我需要网站改版</span></label></dd> <dd><label><input type="radio" name='hobby' id='hobby' value="其他"><span>其他</span></label></dd> </li> <li class="c_tser">您关注的地方</li> <li class="clearfix"> <dd><label><input type="radio" name='hobby2' id='hobby2' value="对功能要求比较高"><span>对功能要求比较高</span></label></dd> <dd><label><input type="radio" name='hobby2' id='hobby2' value="对设计创意要求比较高"><span>对设计创意要求比较高</span></label></dd> <dd><label><input type="radio" name='hobby2' id='hobby2' value="需要可以购物支付"><span>需要可以购物支付</span></label></dd> <dd><label><input type="radio" name='hobby2' id='hobby2' value="搜索引擎排名"><span>搜索引擎排名</span></label></dd> </li> <li class="c_tser">预算</li> <li class="clearfix clearfix2"> <dd><label><input type="radio" name='hobby3' id='hobby3' value="一万以内"><span>一万以内</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="1-3万"><span>1-3万</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="3-5万"><span>3-5万</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="5万以上"><span>5万以上</span></label> </dd> <dd><label><input type="radio" name='hobby3' id='hobby3' value="需招投标"><span>需招投标</span></label> </dd> </li> <li class="c_n" style="border-top:1px solid #eee; padding-top:10px"><span>验证码</span> <dl class="c_n_i yzmm"><input type="text" name='code' id='code' value=""></dl><span style="text-align:center"><img src="/Public/Home/images/1661eb19783442c38063791555cd0d80.gif" onclick="this.src=this.src + '?'" width="100" height="40"></span> </li> <li class="clearfix"> <dd class="submit"><input name='submit' type="submit" value="提交需求"></dd> </li> </form> </div> </div> </div> <div id="bg" class="bg" style="display:none;"></div> <div id='popIframe' class='popIframe' frameborder='0'></div> <script> //提交需求选项 $(document).ready(function (e) { $(".mess_form").submit(function () { if ($("#gsname").val() == "") { alert("请填写您的公司名称！"); $("#gsname").focus(); return false; } if ($("#gemail").val() == "") { alert("请填写您的邮箱"); $("#gemail").focus(); return false; } if ($("#name").val() == "") { alert("请填写您的姓名！"); $("#name").focus(); return false; } if ($("#tel").val() == "") { alert("请填写您的电话！"); $("#tel").focus(); return false; } if ($("#hobby").val() == "") { alert("请选择您需要的服务！"); $("#hobby").focus(); return false; } if ($("#hobby2").val() == "") { alert("请选择您关注的地方！"); $("#hobby2").focus(); return false; } if ($("#hobby3").val() == "") { alert("请选择您的预算！"); $("#hobby3").focus(); return false; } if ($("#code").val() == "") { alert("请填写正确的验证码！"); $("#code").focus(); return false; } }); }); </script> <script language="javascript" type="text/javascript"> //提交需求窗口 function showDiv() { document.getElementById('popDiv').style.display = 'block'; document.getElementById('popIframe').style.display = 'block'; document.getElementById('bg').style.display = 'block'; } function closeDiv() { document.getElementById('popDiv').style.display = 'none'; document.getElementById('bg').style.display = 'none'; document.getElementById('popIframe').style.display = 'none'; } </script> <script type="text/javascript" src="/Public/Home/js/scrolltopcontrol.js"></script> <script type="text/javascript" src="/Public/Home/js/su_new.js"></script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>