html - 从 CSS 而不是 HTML 选择图像

Question

我有一个棘手的问题。对这里的某些人来说可能很有趣。

我正在尝试克服 html img 并通过 css 背景属性使用图像。

所以，代码很简单:

<a id="logo" href="/"><img src="/logo1.png"></a>

CSS

position: relative;
height: 85px;
width: 200px;
background: url(/logo2.png) no-repeat;
background-size: 200px 200px;

因此，我希望从 html 中删除 logo1，并让 css 图像 logo2 取代 logo1。

注意:没有额外的 div 和类，只有那个 html 标记!

什么都试过了，但我认为这是不可能的？

Answer 1

使用 display: none 删除 img并使用 display: block/inline-block/table-cell获取您的高度和宽度。

在此示例中，红色 <img>将被删除并替换为黄色 CSS 背景图片。

Example!

HTML

<a id="logo" href="/"><img src="http://www.placehold.it/200/FF0000"></a>

CSS

a { 
   position: relative;
   height: 85px;
   width: 200px;
   background: url(http://www.placehold.it/200/FFFF00) no-repeat;
   background-size: 200px 200px;
   display: block;
}
a img {
    display: none;
}