我可以使用CSS将图像放入标签中吗？

Question

我有以下HTML：

<td colspan="23"><img src="images/layout_15.gif" width="887" height="115"></td>

但我想知道是否可以改为：

<td colspan="23" class="something">

或：

<td colspan="23" id="something">

然后我可以在CSS文件中定义图像的样式吗？如果是这样，如何以及那样做更好？

Answer 1

我不会将width标记的height和<img>属性替换为CSS标记。位图图像文件具有固有的像素宽度和高度，在下载和解析CSS文件之前，该信息对浏览器（页面布局）很有用。

虽然重新阅读了你的问题，但也许你正试图完全摆脱<img>标签？如果是这样，如果你有这个HTML：

<td colspan="23" class="something"></td>

您可以将图像显示在其中：

.something {
    width: 887px;
    height: 115px;
    background: url(images/layout_15.gif) left top no-repeat;
}

请注意，CSS中图像的文件路径是相对于CSS文件的。

Answer 2

您需要Descendant CSS Selector，以便您可以定位<td>的特定类/ ID中的图像元素。

Answer 3

如果您希望嵌入在td中的所有图像具有相同的宽度和高度，则可以使用：

.something img{
 width:887px;
 height:115px;
}

Answer 4

你的意思是这样吗？

CSS：

.something img { border: 10px solid red; }

HTML：

<td class="something"><img src="images/layout_15.gif"></td>

Answer 5

绝对！它好多了。确保您不会使用它们来进行布局。表格仅应用于表格数据。

如果你的html是：

<td class="first"></td>

然后你的CSS可以

.first {
background: #ccc;
border: 1px solid #999;
font-size: 16px;
}

例如，当然。