我正在尝试使用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方法来插入图像?
的问候, 马尔科
我的徽标图像比放置它的区域大!
这是一个小提琴......
答案 0 :(得分:2)
您可能希望将其设为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
代替此范围)。
答案 1 :(得分:1)
可以尝试此: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
答案 2 :(得分:0)
尝试使用:
<强> CSS:强>
.logo {
backgroud: url("../Icons/logo.png") no-repeat;
width: auto; / * specify the width */
height: 50px;
margin-top: 35px;
margin-bottom: 65px;
}
答案 3 :(得分:0)
呀: 最好的方法,使用
background: url("/Icons/logo.png") [parameters];