Html 奇怪的白色图像边框，带有徽标

我正在尝试使用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;
}

html
象征
意思
未排定
停用坦克
测试计划
进行中测试
迟考
意思
这是你的答案：

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

编辑：

在
div
中移动您的
img
标签

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

这里是工作的重点：
你的html就是问题所在。您的图像没有指定源，但您放置了背景。浏览器正在尝试读取图像，但找不到源。使用图像源并删除背景，或者使用span（例如）并保留背景
 你能添加你的HTML或创建一个提琴吗？你有一个关于这个问题的实时链接或JSFIDLE链接吗？@chrisw.iec-不要让我们想象你的问题。提供一个屏幕截图，说明你想要什么以及现在正在发生什么。@chrisw.iec你把我打得遍体鳞伤。你能花点时间更好地描述一下你的问题吗？这就是你要找的吗@谢谢你的赏识！：）在IE 10中，改变提琴的大小并不是问题，但是提琴上出现的徽标仍然叠加在我的原始图像的左上角，在红色边框的内侧有一个白色边框。我认为img标签就是问题所在。
这是一个显而易见的HTML解决方案。OP想要CSS。左上角那个白色的东西是什么？你看不见吗？@AayusjiJain我去掉了尾端标签，效果很好，谢谢！他确实指定了一个图像（在背景上）。使用图像scr工作，这就是我在更改为css之前所做的，我只是尝试在html中删除尽可能多的信息，并将其全部添加到css中。谢谢你的答案是正确的，在html中使用img src和在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;
}