是否可以在CSS中设置src属性值? 在大多数情况下，我们这样使用它:
<img src="pathTo/myImage.jpg" />
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
我想知道是否有一种方法可以做到这一点，而不使用CSS中的background或background-image属性。
当前回答
你可以在HTML代码中定义2个图像，并使用display: none;来决定哪一个是可见的。
其他回答
替代方法
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
使用CSS，这是做不到的。但是，如果你正在使用JQuery，像这样的东西可以做到:
$("img.myClass").attr("src", "http://somwhere");
在一个“控制”容器中放置几张图像，并更改容器的类。在CSS中，根据容器的类添加规则来管理图像的可见性。这将产生与改变单个图像的img src属性相同的效果。
HTML:
<span id="light" class="red">
<img class="red" src="red.png" />
<img class="yellow" src="yellow.png" />
<img class="green" src="green.png" />
</span>
CSS:
#light { ... }
#light * { display: none; } // all images are hidden
#light.red .red { display: inline; } // show red image when #light is red
#light.yellow .yellow { display: inline; } // .. or yellow
#light.green .green { display: inline; } // .. or green
注意，它将预加载所有图像，就像CSS的backround-images，但不像通过JS更改img src。
HTMl代码:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css destination" />
</head>
<body>
<!-- click-able pic with link -->
<a href="site you want">
<!-- Take the off if you don't want click-able link -->
<h1 id(or class)="nameOfClassorid">
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>
Css代码:
span {
display: none;
}
h1 id or class {
height: of pic;
width: of pic;
/* Only flaw (so far) read bottom */
background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
background-image:url(/* 'new background!!!' */);
}
放学后我一直在学习html几天，想知道如何做到这一点。找出背景，然后把两者结合起来。 这工作100%我检查，如果不确保你填写必要的东西!! 我们需要指定高度，因为没有它就什么都没有!! 我留下这个基本的外壳，你可以添加。
例子:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<a href="http:localhost">
<h1>
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>
span {
display: none;
}
h1 {
height: 100px;
width: 100px;
background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/Ubuntu-Desktop-@-2011-01-11-191526-300x225.png");
}
h1:hover {
height: 300px;
width: 300px;
background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}
附注:是的，我是Linux用户;)
我今天找到了一个解决方案(适用于IE6+， FF, Opera, Chrome):
<img src='willbehidden.png'
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
工作原理:
图像被缩小，直到不再可见的宽度和高度。 然后，你需要用填充物“重置”图像大小。这 一个是16x16的图像。当然你可以使用padding-left / 填充顶部以制作矩形图像。 最后，使用背景将新图像放在那里。 如果新的背景图像太大或太小，我建议使用background-size，例如:background-size:cover;这样就能把你的图像放到分配的空间里。
它也适用于提交-输入-图像，它们保持可点击。
参见现场演示:http://www.audenaerde.org/csstricks.html#imagereplacecss
享受吧!
