1

css スタイリングを使用して画像を読み込もうとしていますが、その周りに赤い尾根の境界線がありますが、何らかの理由で html の代わりに css を使用すると、赤い尾根の境界線の内側に奇妙な小さな白い境界線が表示され、白いロゴが表示されます。左上隅にある小さなロゴは小さなモニターかもしれません。他にどう表現すればよいかわかりません。誰が何が起こっているのか知っていますか？他の画像も同じ方法で問題なく読み込めました。

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が問題です。ソースが指定されていない画像がありますが、代わりに背景を入れています。ブラウザは画像を読み込もうとしていますが、ソースが見つかりません。画像ソースを使用して背景を削除するか、たとえばスパンを使用して背景を残します。

于 2013-07-31T06:16:06.040 に答える