0

我知道如何使用 CSS，并且正在学习 Java，所以如果答案恰好包含任何一种语言，我可以补偿。但是，我总是希望有一个单线。:)

如果有帮助，图像的所有 src 属性都将非常相似。

这是我正在从事的一个项目的一个小样本。我正在寻找一种在上方或每张卡片名称旁边有效显示图像的方法。

任何帮助是极大的赞赏

<table class="sentenceCase" id="mainTable"><tr class="notSentenceCase" id="title"><td colspan="10">Name censored Cube</td></tr>
    <tr class="notSentenceCase">
        <td class="description">bla bla bla irrelevant information</td>
    </tr>
    <tr class="rarityRow">
        <td class="empty" ></td>
        <td class="rarity-common" colspan="3">common</td>
        <td class="rarity-uncommon" colspan="3">uncommon</td>
        <td class="rarity-rare" colspan="3">rare</td>
    <tr> <!--White starts here-->
        <td class="colorName" rowspan="4">white</td>
        <td>porcelain legionnaire</td>  <td><img 
        src="http://www.wizards.com/global/images/magic/ZEN/cliff_threader.jpg"
        alt="Cliff Threader"
        border="0"
        height="200px"
        > 
        cliff threader </td>    <td class="lastInRow">marsh threader</td>
        <!--To expand, copy this row ^^ *Also do this in the next three blocks VV-->
        <td>suppression field</td>  <td>bathe in light</td> <td class="lastInRow">cloudgoat ranger</td>
        <td>gideon jura</td>    <td>eight-and-a-half tails</td> <td>tivadar of thorn</td>
    </tr>
    <tr>
        <td>purelace</td>   <td>trade caravan</td>  <td class="lastInRow">auramancer</td>
        <td>auriok bladewarden</td> <td>ivory giant</td>    <td class="lastInRow">crip swap</td>
        <td>parallax wave</td>  <td></td>   <td></td>
    </tr>
    <tr>
        <td>otherworldly journey</td>   <td>bonds of faith</td> <td class="lastInRow">avian changeling</td>
        <td></td>   <td></td>   <td class="lastInRow"></td>
        <td></td>   <td></td>   <td></td>
    </tr>
    <tr>
        <td></td>   <td></td>   <td class="lastInRow"></td>
        <td></td>   <td></td>   <td class="lastInRow"></td>
        <td></td>   <td></td>   <td></td>
    </tr> <!--White ends here-->
4

1 回答 1

0

你试过:before和:after 伪元素吗？

td.card:after {
    content: url(image_url);
}

这些伪元素在您的情况下应该非常方便。你不需要在每张卡片旁边放一张图片。您只需将card类添加到您想要的任何tds 并使用适当的 CSS 设置它们的样式。

这是一篇关于它的好文章

于 2013-10-23T07:01:25.690 回答