更新

Question

我正在尝试使用css插入图像。在Chrome中，它会根据需要进行显示。

CSS：

.logo {
    content: url("../Icons/logo.png");
    width: auto;
    height: 50px;
    margin-top: 35px;
    margin-bottom: 65px;
}

HTML：

<span class="logo pull-right"></span>

但在Firefox中没有插入。我试过使用：之前的伪类。但是也应该考虑图像的大小。使用伪类，图像不会调整为所需的尺寸。

是否有更好的CSS方法来插入图像？

的问候，马尔科

更新

我的徽标图像比放置它的区域大！

这是一个小提琴......

http://jsfiddle.net/mkeuschn/URu57/

Answer 1

您可能希望将其设为background而不是content，请检查this fiddle：

.logo {
    background: url("http://goo.gl/OJhO2s") no-repeat;
    background-size: 250px 250px;
    display: block;
    width: 250px;
    height: 250px;
    margin-top: 35px;
    margin-bottom: 65px;
}

并为其提供特定的width和height以及block显示属性（您可能还希望使用div代替此范围）。

Answer 2

可以尝试此:before或:after，

.logo:before {
   content: url("../Icons/logo.png");
   width: auto;
   height: 50px;
   margin-top: 35px;
   margin-bottom: 65px
 }

而不是

.logo {
  ...
 }

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/::before

Answer 3

尝试使用：

<强> CSS：

.logo {
    backgroud: url("../Icons/logo.png") no-repeat;
    width: auto; / * specify the width */
    height: 50px;
    margin-top: 35px;
    margin-bottom: 65px;
}

Answer 4

呀：最好的方法，使用

background: url("/Icons/logo.png") [parameters];

使用CSS插入图像

更新

4 个答案: