Question

我知道如何使用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-->

Answer 1

您是否尝试使用:before和:after 伪元素？

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

这些伪元素在你的情况下应该非常方便。您无需在每张卡旁边放置图像。您只需将card类添加到您想要的任何td中，并使用正确的CSS设置它们的样式。

Here's a nice article about it

在每个实例旁边显示<img/>的有效方法

1 个答案: