html - 不能使用 css 用 Bootstrap 3 替换背景图片

Question

使用 Bootstrap 3，我正在尝试用较小的图像替换小型设备的较大图像。

有了这段代码，我什么也得不到。如果我将图像 src 放在 html 中，那么我会在某些 View 中看到两个图像。我必须指定一个 div 大小才能工作吗？

html:

    <div><img id="logo"></div>

CSS:

    #logo {background-image: url('../images/logo.svg'); }

@media only screen and (max-width: 420px) {
    #logo {background-image: url('../images/logo-small.svg'); }
    }

Answer 1

设置背景图像时，它不会更改图像的 src 属性，而只会更改图像背景。

您可以直接将图像显示为 div 的背景(并忽略 img 元素):

<div id="logo"></div>

 #logo {
   background-image: url('../images/logo.svg');
   background-repeat:no-repeat;
   background-size:cover;
   width:200px;/*your image width*/
   height:60px;/*your image height*/
}

然后您当然必须设置 div 的宽度和高度。

没有跨浏览器的解决方案可以直接从 CSS 更改图像的 src 属性(这被认为是内容而不是样式)。

一些浏览器将支持 css 规则 content-url 但其他浏览器不支持(如 Firefox)。它看起来像这样:

#yourimageid {
 content:url(yourimage.jpg);
}

但同样，它不是跨浏览器的解决方案。

另一个不错的选择是使用 Javascript/jQuery 直接更改 src 属性。

$('#logo').attr('src','yourimage.jpg');

希望这对您有所帮助!