Überlagern Sie ein Bild über einer Tischzelle

Was ich zu tun suche, ist ein Bild oben auf der VPS6-Zelle, die in blau ist, um eine Schaltfläche Bild zu haben, ist der Link zu dem Bild http://imgur.com/EoDB31K, tue ich nicht weiß, wie man das Bild auf jsfiddle lädt.Überlagern Sie ein Bild über einer Tischzelle

<table class="table"> 
 
    <tr> 
 
     <th>Package</th> 
 
     <th>CPU/vCore </th> 
 
     <th>Hard Disk (RAID10)</th> 
 
     <th>Guaranteed RAM</th> 
 
     <th>Premium Bandwidth</th> 
 
     <th>Port Speed</th> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: middle; font-weight: bold;"> 
 
      VPS1 
 
     </td> 
 
     <td style="vertical-align: middle; background-color:#d7f3fd"> 
 
      2.66 GHz<br> 
 
      1 vCore 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      10GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      1 GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      500GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      100Mbps 
 
     </td> 
 
     <td> 
 
      <div class="text-center"> 
 
       <div class="table-price"><span>$9.<span>99</span></span>/month</div> 
 
       <div class="table-button"> 
 
        <a href="/billing/cart.php?a=add&pid=74" class="button type-3 size-2">Configure</a> 
 
       </div> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd"> 
 
      VPS2 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      2.66 GHz<br> 
 
      2 vCore 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      20GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      2GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      1000GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      100Mbps 
 
     </td> 
 
     <td> 
 
      <div class="text-center"> 
 
       <div class="table-price"><span>$19.<span>99</span></span>/month</div> 
 
       <div class="table-button"> 
 
        <a href="/billing/cart.php?a=add&pid=75" class="button type-3 size-2">Configure</a> 
 
       </div> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd"> 
 
      VPS4 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      2.66 GHz</br> 
 
      2 vCore 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      40GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      4GB 
 
     </td > 
 
     <td style="vertical-align: middle;"> 
 
      1000GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      100Mbps 
 
     </td> 
 
     <td> 
 
      <div class="text-center"> 
 
       <div class="table-price"><span>$29.<span>99</span></span>/month</div> 
 
       <div class="table-button"> 
 
        <a href="/billing/cart.php?a=add&pid=76" class="button type-3 size-2">Configure</a> 
 
       </div> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd; background-image: url('bestSeller.png')"> 
 
      VPS6 
 
     </td> 
 
     <td style="vertical-align: middle; background-color:#d7f3fd"> 
 
      2.66 GHz</br> 
 
      4 vCore 
 
     </td> 
 
     <td style="vertical-align: middle; background-color:#d7f3fd"> 
 
      60GB 
 
     </td> 
 
     <td style="vertical-align: middle; background-color:#d7f3fd"> 
 
      6GB 
 
     </td> 
 
     <td style="vertical-align: middle; background-color:#d7f3fd"> 
 
      2000GB 
 
     </td> 
 
     <td style="vertical-align: middle; background-color:#d7f3fd"> 
 
      100Mbps 
 
     </td> 
 
     <td style=" background-color:#d7f3fd"> 
 
      <div class="text-center"> 
 
       <div class="table-price"><span>$49.<span>99</span></span>/month</div> 
 
       <div class="table-button"> 
 
        <a href="/billing/cart.php?a=add&pid=77" class="button type-3 size-2">Configure</a> 
 
       </div> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd"> 
 
      VPS8 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      2.66 GHz</br> 
 
      4 vCore 
 
     </td> 
 
     <td style="vertical-align: middle; "> 
 
      80GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      8GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      4000GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      100Mbps 
 
     </td> 
 
     <td> 
 
      <div class="text-center"> 
 
       <div class="table-price"><span>$59.<span>99</span></span>/month</div> 
 
       <div class="table-button"> 
 
        <a href="/billing/cart.php?a=add&pid=78" class="button type-3 size-2">Configure</a> 
 
       </div> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd"> 
 
      VPS16 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      2.66 GHz</br> 
 
      4 vCore 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      100GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      16GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      6000GB 
 
     </td> 
 
     <td style="vertical-align: middle;"> 
 
      100Mbps 
 
     </td> 
 
     <td> 
 
      <div class="text-center"> 
 
       <div class="table-price"><span>$69.<span>99</span></span>/month</div> 
 
       <div class="table-button"> 
 
        <a href="/billing/cart.php?a=add&pid=79" class="button type-3 size-2">Configure</a> 
 
       </div> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table> 
 
</div> 
 
</div> 
 
</div>

JsFiddle

Quelle

2016-05-02 Elroy Fernandes

Sie sollten Ihre Tabelle in einen einfachen div wrapper legen, damit sie als absolute Positionsreferenz für eine Abdeckung über den VPS6-Eintrag verwendet werden kann. Das Cover wäre ein div für diesen Job. Erinnere dich daran, wie mächtig ein Div sein kann. Es wird sein eigener Behälter für ... was auch immer. – Sparky256

Sie haben wahrscheinlich sehen nichts, weil Ihr Quellbild ist sehr groß; nur das Hintergrundbild zu setzen, hätte nur einen winzigen Teil der oberen rechten Ecke abgeschnitten.

<td style="vertical-align: middle; font-weight: bold; 
    background-color:#d7f3fd; 
    background-image: url('http://i.imgur.com/EoDB31K.png'); 
    background-size: 40px 40px; 
    background-repeat: no-repeat;">

Quelle

2016-05-02 23:29:42

Ich will es für 1 Zelle nur, die Zelle mit VPS6 –

danke, dass für mich gearbeitet, so viel mit CSS zu lernen –

ein :after Pseudoelement Verwendung: https://jsfiddle.net/uyctbrz6/1/

#vps6:after { 
    content:""; 
    top:0; 
    width:30px; 
    height:30px; 
    position:absolute; 
    display:block; 
    background-image: url(http://i.imgur.com/EoDB31K.png); 
    background-size:100% auto; 
    background-repeat:no-repeat; 
}

es aber ziemlich schlecht aussieht.

Quelle

2016-05-02 23:31:16

es sieht nicht gut aus und ich bin auf einem 22 "Monitor kann ich mir nicht vorstellen, auf einem kleineren Ich denke, es würde wie eine farbige Linie dort aussehen – mlegg

Nun, das war genau das, was Sie angefordert haben.Wenn Sie die Größe vergrößern möchten, könnte es wie folgt aussehen: https://jsfiddle.net/uyctbrz6/2/ –

I bin nicht die ursprüngliche Frage Person. Ich wollte nur, dass es zu ihnen kommentieren, obwohl es das ist, was sie gefragt. Sie wissen nie, welche Größe Bildschirm Menschen auf sehen. – mlegg

Überlagern Sie ein Bild über einer Tischzelle

Antwort

Verwandte Themen