图像已从显示中消失，但它在那里

我决定试用名为Scarlet by Macaw的新程序。我建立了一个页面，一切都很顺利，但当我把代码移到Dreamweaver中时，一个图像消失了。我已经摆弄了几个小时了，现在我要把头发拔出来了。这是一些基本的东西，我认为缺乏z索引，但给它一个并没有改变问题。CSS在页面本身，因为它是一个单页的交易。缺少的图像是UPS徽标，位于其他客户徽标旁边，最后一行。我会给你一个电话号码，但没有：（

能不能请一个善良的灵魂告诉我我缺少了什么？

    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
<title>index</title>
 <style type="text/css">
@font-face {
    font-family: 'Open Sans', sans-serif;
    src: <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
    font-weight: 400;
    font-style: normal;
}
h1  {
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: bold;
line-height:2;
margin-top: 30px;
margin-bottom: 1px;
}
h2  {
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
line-height:1.38;
margin-top: 0px;
margin-bottom: 0px;
}
h3  {
color: #000000;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: bold;
line-height:1.38;
margin-top: 30px;
margin-bottom: 1px;
}
h4  {
color: #000000;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
line-height:1.38;
margin-top: 0px;
margin-bottom: 0px;
}
 .fluid-span-1 {
  width: 6.5%;
}
.fluid-span-2 {
  width: 15%;
}
.fluid-span-3 {
  width: 23.5%;
}
.fluid-span-4 {
  width: 32%;
}
.fluid-span-5 {
  width: 40.5%;
}
.fluid-span-6 {
  width: 49%;
}
.fluid-span-7 {
  width: 57.5%;
}
.fluid-span-8 {
  width: 66%;
}
.fluid-span-9 {
  width: 74.5%;
}
.fluid-span-10 {
  width: 83%;
}
.fluid-span-11 {
  width: 91.5%;
}
.fluid-span-12 {
  width: 100%;
}
.fluid-offset-1 {
  margin-left: 8.5%;
}
.fluid-offset-2 {
  margin-left: 17%;
}
.fluid-offset-3 {
  margin-left: 25.5%;
}
.fluid-offset-4 {
  margin-left: 34%;
}
.fluid-offset-5 {
  margin-left: 42.5%;
}
.fluid-offset-6 {
  margin-left: 51%;
}
.fluid-offset-7 {
  margin-left: 59.5%;
}
.fluid-offset-8 {
  margin-left: 68%;
}
.fluid-offset-9 {
  margin-left: 76.5%;
}
.fluid-offset-10 {
  margin-left: 85%;
}
.fluid-offset-11 {
  margin-left: 93.5%;
}
body {background-color:#999999;
    font-size:1em;
}
.about{
    position: relative;
    float: left;
    clear: both;
    width: 100%;
    height: 240px;
    background-image: url(images/backgrounds/lt_gray.png);
    background-size: auto auto;
}
.blurb {
    position:absolute;
    top:0;left:17%;
    width:33%;
    height:283px;
}
.blurb2 {
    float:left;
    width:50%;
    height:239px;
    margin-left:40.9492199999%;
}
.clients {
    position:relative;
    float:left;
    clear:both;
    width:33%;
    height:100px;
    margin:400px 0 0 17%;
}
.content{
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 500px;
    background-image: url(images/backgrounds/dk_gray.png);
    background-size: auto auto;
    background-position: left top;
}
.facebook {
    display:block;
    position:absolute;
    top:0;
    left:-0.2588757397%;
    width:25px;
    height:auto;
    overflow:hidden;
    z-index:5;
}
.form {
    position:absolute;
    top:0;left:51.8333333333%;
    width:33%;
    height:350px;
}
.google {
    display:block;
    position:absolute;
    top:0;left:143px;
    width:25px;
    height:auto;
    overflow:hidden;
    z-index:8;
}
.header {
    position:relative;
    float:left;
    width:100%;
    height:100px;
    background-color:#999999;
}
.image {
    display: block;
    position: absolute;
    top:26px;           
    left: 20.06640625%;
    width: 196px;
    height: auto;
    overflow: hidden;
    top: 25px;
}
.linkedin {
    display:block;
    position:absolute;
    top:0;
    left:95px;
    width:25px;
    height:auto;
    overflow:hidden;
    z-index:7;
}
.logo {
    display:block;
    position:absolute;
    top:28px;
    left:17%;
    width:250px;
    height:auto;o
    verflow:hidden;
}
.pepsi {
    display:block;
    position:absolute;
    top:0;
    left:23.6229482323%;
    width:100px;
    height:auto;
    overflow:hidden;
    z-index:11;
}
.social {
    position:relative;
    float:left;
    width:15%;
    height:25px;
    margin:436px 0 0 12.79948%;
}
.twitter {
    display: block;
    position: absolute;
    top: 0;
    left: 46px;
    width: 25px;
    height: auto;
    overflow: hidden;
    z-index: 6;
}
.ups {
    display: block;
    float: left;
    width: 100px;
    height: auto;
    margin-left: 1.9847%;
    overflow: hidden;
}
.verizon {
    display:block;
    position:relative;
    float:left;
    z-index:12;
    width:100px;
    height:auto;
    margin-left:47.32086%;
    overflow:hidden;
}
._3m{display:block;position:absolute;top:0;left:0;z-index:10;width:100px;height:auto;overflow:hidden;}
.copywrite{
    float: left;
    clear: both;
    width: 100%;
    height: 50px;
    background-color: #999999;
}
.copywrite{
    float: left;
    clear: both;
    width: 100%;
    height: 50px;
    background-color: #999999;
}
.copywrite-2 {
    position:absolute;
    top:850px;left:17%;
    width:39%;
    min-height:25px;
    line-height:1.38;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0px;
}
 </style>
</head>
<body class="body page-index clearfix">
  <div class="header"> <a href="http://www.issuetrak.com/"><img src="images/logo--trans.gif" alt="IssueTrak" class="logo"></a>
  </div>
  <div class="content">
    <div class="blurb"><h1>TRACK COMPLAINTS AND COMPLIMENTS</h1>
      <h2>Working with customers, you're guaranteed at least one complaint. But if you're tracking and resolving those complaints with IssueTrak, you may end up with more than one compliment!                 With IssueTrak, ensure faster customer response times and better quality control by centralizing your customer feedback!</h2>
      <br>
      <h1>SIMPLIFY THE PROCESS</h1>
      <h2>
        <ul>
          <li>Resolve issues by email or web portal</li>
          <li>Mobile access</li>
          <li>Easy to use and configure </li>
          <li>Award-winning Support Team</li>
        </ul>
      </h2></div>
    <div class="form"></div>
  </div>
  <div class="clients clearfix">
    <img src="images/client_logos/pepsi.png" alt="Pepsi uses Issuetrak" class="pepsi">
    <img src="images/client_logos/3M.png" alt="3M uses Issuetrak" class="_3m">
    <img src="images/client_logos/verizon.png" alt="Verizon uses Issuetrak" class="verizon">
    <img src="images/client_logos/ups.png" alt="UPS uses Issuetrak" class="ups">
  </div>
  <div class="social">
    <img src="images/social/gplus.png" alt="Find us on Google+" class="google">
    <img src="images/social/li.png" alt="Find us on LinkedIn" class="linkedin">
    <img src="images/social/t.png" alt="Find us on Twitter" class="twitter">
    <img src="images/social/fb.png" alt="Find us on Facebook" class="facebook">
  </div>
  <div class="about clearfix">
    <img src="images/Dan.jpg" alt="Dan Luhring - CEO" class="image" id="dan">
    <div class="blurb2"><h3>Welcome to IssueTrak</h3><br>
    <h4>IssueTrak is a fast-paced, agile software company based in the Hampton Roads area of
Virginia. We’ve a got a 20-year track record of successfully developing issue-tracking
and process management software for companies of all sizes. 
We’re stoked on innovation and we love data, and we’re harnessing the power of both to
develop a next generation product. We are a customer-centric company with a dedicated
vision of creating the most robust and versatile software solution for our clients.
And, we aren’t afraid to take risks to make this happen.</h4></div>
  </div>
  <footer class="copywrite"><span class="copywrite-2">&copy;2015 Issuetrak, Inc. All Rights Reserved</span></footer>
</body>
</html>

代码正常。
确保图像在images/client_logos/文件夹中。还要确保图像名称和扩展名为ups.png。

使用Chrome开发工具，右键单击其中一个可见徽标并使用"Inspect Element"，然后在开发工具中找到UPS图像元素。查看CSS，了解为什么它没有显示。显示器是否设置为无？它有高度和宽度吗？等等。

缩小还可以显示指示布局问题的图像。您也可以单击开发工具中的图像链接，以确保它在那里。或者检查网络选项卡以确保图像正在加载，如果没有从状态代码中获得原因的线索。

您可能还想确保任何外部CSS或JS文件都在加载，而不是404。

让我知道这是否有帮助，以及你发现了什么，如果它没有解决你的问题，我会看看我还能想出什么。

相关内容

最新更新

热门标签：