1

我正在尝试使用 css 样式加载图像，并且它周围有一个红色的脊边框，但是由于某种原因，当我使用 css 而不是 html 时，我在红色脊边框的内侧得到一个带有白色徽标的奇怪的小白色边框在左上角的小标志可能是一个小显示器，我不知道如何描述它。有谁知道发生了什么？我以相同的方式加载了其他图像，没有问题。

这是CSS脚本

        html

            <table class="TopTableLeft">
        <tr class="TopTableLeft">
          <th class="thTopTableLeft1"><div class="tblheadr">&nbsp;&nbsp;Symbol&nbsp;&nbsp;</div></th>            
          <th class="thTopTableLeft2"><div class="tblheadr2">Meaning</div></th>
    </tr>
        <tr> 
      <td class="ntscheduled"></td> 
          <td class="tdtext">Not Scheduled</td>
        </tr>
        <tr>
      <td class="astris"></td>
          <td class="tdtext">&nbsp;&nbsp;Deactivated Tanks&nbsp;&nbsp;</td>
        </tr>
        <tr>
      <td class="bltest"></td>
      <td class="tdtext">Test Scheduled</td>
        </tr>
        <tr> 
      <td class="grntest"></td>
          <td class="tdtext">Test In Process</td>
        </tr>
        <tr> 
      <td class="rdtest"></td>
          <td class="tdtext">Test Late</td>
        </tr>
   </table>
<div id="pic" align="center" style="float:left;">
  <img class="logo"/>
</div>
<div id="toptable2" align="center" style="float:none;">
   <table class="TopTableRight">
        <tr class="TopTableRight">
          <th class="thTopTableRight1"><div class="tblheadr2">Meaning<div/></th>
          <th class="thTopTableRight2"><div class="tblheadr"">&nbsp;&nbsp;Symbol&nbsp;&nbsp;</div></th>
        </tr>
        <tr> 
      <td class="tdtext">Not Scheduled</td>
          <td class="ntscheduled"></td>
        </tr>
        <tr>
      <td class="tdtext">&nbsp;&nbsp;Deactivated Tanks&nbsp;&nbsp;</td>
      <td class="astris"></td>
        </tr>
    <tr>
      <td class="tdtext">Test Scheduled</td>
          <td class="bltest"></td>
        </tr>
        <tr>
      <td class="tdtext">Test In Process</td>
          <td class="grntest"></td>
        </tr>
        <tr>
      <td class="tdtext">Test Late</td>
          <td class="rdtest"></td>
        </TR>
  </table>

              css




    table.TopTableLeft{
    float:left; border:5px; border-style:outset; border-color:#FFFF00; 
    height:20px; width:23%; border-spacing:0; border-collapes:collapse;
}

    table.TopTableRight{
    float:right;border:5px; border-style:outset;border-color:#E80000; height:20px; 
    width:23%; border-spacing:0; border-collapes:collapse; vertical-align:top;
}

    tr.TopTableLeft{
    background-color:#595959;color:FFFF00;
}

    tr.TopTableRight{
    background-color:#595959;color:FFFF00;
}

    th.thTopTableLeft1{
    border:1px solid #FFFF00;font-size:12px; width:45;height:20;
}

    th.thTopTableLeft2{
    border:1px solid #FFFF00;font-size:12px; width:125;height:20;
}

    th.thTopTableRight1{
    border:1px solid #FFFF00;font-size:12px; width:125;height:20;
}

    th.thTopTableRight2{
    border:1px solid #FFFF00;font-size:12px; width:45;height:20;
}

    div.tblheadr{
    text-align:center; margin-bottom:-1px;
}

    div.tblheadr2{
    text-align:center; margin-bottom:-1px;
}

            td.tdtext{
            background-color:#000000; color:#FFFF00; border:1px solid #FFFF00; 
            font-family:'Arial'; font-size:12px; text-align:center; font-weight:bold;
    }

    td.ntscheduled{
    background-color:#000000;color:FFFF00; border:1px solid #FFFF00;
    background-image: url(../Images/Not-Scheduled.png); background-size:22px 24px; 
    width:25; height:24; background-repeat:no-repeat; background-position:center;
}

    td.astris{
    background-color:#000000;color:FFFF00; border:1px solid #FFFF00;
    background-image: url(../Images/Gray-Astris3.png); background-size:22px 24px; width:25; 
    height:24; background-repeat:no-repeat; background-position:center;
}

    td.bltest{
    background-color:#000000;color:#FFFF00; border:1px solid #FFFF00;
    background-image: url(../Images/Blue-Test.png); background-size:22px 24px; width:25; 
    height:24; background-repeat:no-repeat; background-position:center;
}

    td.grntest{
    background-color:#000000;color:FFFF00; border:1px solid #FFFF00;
    background-image: url(../Images/Green-Test.png); background-size:22px 24px; width:22;
    height:24; background-repeat:no-repeat; background-position:center;
}

    td.rdtest{
    background-color:#000000;color:FFFF00; border:1px solid #FFFF00;
    background-image: url(../Images/Red-Test.png); background-size:22px 24px; width:22; 
    height:24; background-repeat:no-repeat; background-position:center;
}

    img.logo{
    float:none; margin-left:120px; margin-right:auto; margin-top:17px; 
    border:10px ridge #E80000; background-image: url(../Images/Logo.png); 
    background-size:199px 101px; width:199; height:101; background-repeat:no-repeat; 
    background-position:center;
}
4

2 回答 2

2

这是您的解决方案：

img.logo {
      margin-left:120px;
      margin-right:auto;
      margin-top:17px;
      border:10px ridge #E80000;
      background-image: url(../Images/Logo.png);
      background-size:199px 101px;
      width:199px;
      height:101px;
      background-repeat:no-repeat;
      background-position:center;
  }

看看小提琴：小提琴

宽度和高度必须定义在px

编辑：

像这样移动你的img标签div

 <div id="logo"><img/></div>

然后添加它的CSS：

#logo{
    float:none; 
    margin-left:120px; 
    margin-right:auto; 
    margin-top:17px; 
    border:10px ridge #E80000; 
    background-color: blue; 
    background-image:  url(../Images/Logo.png);
    background-size:199px 101px;
    width:199px;
    height:101px;
    background-repeat:no-repeat;
    background-position:center;
}

这是工作中的小提琴：小提琴

于 2013-07-31T06:14:43.317 回答
1

你的html是问题所在。您有未指定来源的图像，但您放置了背景。浏览器正在尝试读取图像但找不到源。使用图像源并删除背景或使用 span 例如并保留背景。

于 2013-07-31T06:16:06.040 回答