如何更改 <img> 标记以便我可以在 CSS 中选择图像？答案

【问题标题】：How do I change an <img> tag so that I can choose the image in CSS?如何更改 <img> 标记以便我可以在 CSS 中选择图像？
【发布时间】：2009-10-02 18:49:54
【问题描述】：

我有一个硬编码的图像，但我想针对不同的主题对其进行更改。我怎样才能做到这一点？我尝试创建一个跨度并设置它的背景图像属性，但它没有工作......

我也不想硬编码宽度/高度，因为我将其更改为的图像可能是另一个尺寸。

【问题讨论】：

我能想到你会如何使用 JavaScript 来做到这一点，但纯 CSS 解决方案会很好。
JavaScript 可以简单地添加到 CSS... 获取图像的高度和宽度，然后将高度和宽度添加到 CSS。但是它可以为不在 DOM-proper 中的背景图像做到这一点吗？
由于某种原因仍然无法正常工作...我将主题应用于跨度，但也许还有其他方法？

标签： html css

【解决方案1】：

除非您指定宽度和高度，否则我认为您不能使用纯 CSS。因此，只需将 CSS 中的宽度和高度以及图像设置为背景图像即可。您知道您在主题中使用的图片，因此您应该知道它的尺寸。

/* Theme1.css */
.ThemeImage
{
    background-image: url('imageTheme1.jpg');
    width: 150px;
    height: 100px;
}

/* Theme2.css */
.ThemeImage
{
    background-image: url('imageTheme2.jpg');
    width: 300px;
    height: 50px;
}

等等

【讨论】：

谢谢，将 CSS 放入的最佳标签是什么？
@SLC - 不，最好的标签是图像实际上是背景或替代品的标签。空的功能范围并不比用于样式的硬编码图像好多少。如果您希望它作为页面特定区域的背景，则应将其设置为该区域的背景，而不是空白范围。
我只是想在 CSS 文件中更改一些 16x16 图像的源...所以我需要将 CSS 放在一些东西上以使其显示。我尝试使用跨度，但忽略了宽度/高度。我还是卡住了……
我个人会将其放入 DIV 中，尽管没有“最佳”标签。如果您使用跨度，则需要使用 display: block 或 inline-block 才能设置尺寸。

【解决方案2】：

我在某处读到您可以应用全透明图像，然后在 CD 中设置背景，但所有图像必须具有相同的大小。另一种解决方案是将它们存储在服务器上的一致文件夹中。

但是你不能使用 CSS 直接设置 img src。

【讨论】：

【解决方案3】：

您必须定义您的高度和宽度才能显示图片。否则，它将被限制为浏览器默认为该元素设置的高度和宽度。

例如，一个空的 span 没有高度或宽度，因此任何背景图像都将覆盖 0x0 区域的背景。您会注意到，如果您在测试的那个范围内输入“我讨厌静态尺寸”，您会得到图像的一个小角落。

现在，您可以在 CSS 中设置高度和宽度，因此无需将其硬编码到 HTML 中，但是您只能对显示类型为“块”的元素执行此操作。您不能将内联元素（如跨度）设置为具有高度，因为它们是内联的。你可以给它填充，但这很容易失败。

如果您希望该区域具有高度和宽度，但仍内联，您可以使用display: inline-block;，但如果您在某些类型的元素上这样做，IE 会崩溃。

【讨论】：

【解决方案4】：

你有一个带有透明图像的<img> 怎么样？然后，您可以更改它的 css。

<img src='transparent.gif' alt='image' id='change' />

img#change { background: url(pic1.jpg); width:200px; height:200px; }

尽管如此，图像仍然需要相同大小...

【讨论】：