文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >图像已经从显示器上消失了，但它仍然存在

问图像已经从显示器上消失了，但它仍然存在
EN

Stack Overflow用户
提问于 2015-06-29 06:54:41
回答 2查看 1.3K关注 0票数 0

我决定尝试一下新的程序，叫做“Scarlet by Macaw”。我设置了一个页面，一切都很顺利，但是当我将代码移到Dreamweaver中时，一个图像消失了。我已经摆弄这个东西好几个小时了，我都快把头发拔出来了。这是一些基本的东西，我认为没有z索引，但是给它一个并没有改变问题。CSS在页面本身，因为它是一页交易。缺少的图像是UPS徽标，位于其他客户徽标旁边，排在最后。我想给你一个行号，但是没有:(

可不可以请某个仁慈的灵魂告诉我我错过了什么？

代码语言：javascript
复制
    <!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>
css
html
EN

回答 2

Stack Overflow用户

发布于 2015-06-29 07:08:03

代码没问题。

确保图像位于images/client_logos/文件夹中。还要确保图像名称和扩展名为ups.png。

票数 0
EN

Stack Overflow用户

发布于 2015-06-29 07:12:15

使用Chrome Dev tools，右键单击其中一个可见徽标，使用"Inspect Element"，然后在Dev Tools中找到UPS图像元素。查看CSS以了解为什么它没有显示出来。是否将显示设置为无？它有高和宽吗？等等。

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

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

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/31105594

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档