Question

我有一个硬编码的图像，但我想为不同的主题更改它。我怎样才能做到这一点？我尝试创建一个span并设置它的background-image属性，但它没有用......

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

Answer 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;
}

等

Answer 2

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

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

Answer 3

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

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

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

如果您希望该区域具有高度和宽度，但仍然以内联方式流动，则可以使用display: inline-block;，但如果您对某些类型的元素执行此操作，IE将会出现异常情况。

Answer 4

你有<img>透明图像怎么样？然后，你可以改变它的CSS。

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

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

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

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

4 个答案: