English 中文(简体)
A. 背景图
原标题:Background image not showing up in span tag
  • 时间:2011-09-28 11:01:58
  •  标签:
  • html
  • css

Im having trouble with a span tag showing a background image in the latest FF on windows 7. It seems to work and show everything fine in earlier FF, Chrome, Safari and IE but handheld devices and windows 7 it seems to fail.

如果看上去这似乎模糊不清,那么,这些图像最初是 p的,没有具体说明,也没有宽度,因为这样就使图像变得高。

<span class="design">Design Viz</span>
<style>
.design  {
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    padding-left:25px;
}
</style>
最佳回答

The background-image CSS property only puts an image as the background. The width and height of an object is always defined either by static settings via CSS/inline styling, or by the actual size of the content displayed in it. In your case, since you haven t added any content between your tags, its x/y dimensions will be 0, but there is no bug with the background. It s there, only you can t see it unless you define (somehow) a size for the element.

<span class="design">Design Viz</span>
.design  {
padding-left:25px;
background:url(_includes/images/agenda-design.gif) no-repeat top left;
display: inline-block;
height: 17px;
width: 50px;
}

如果50人对你的案件有任何帮助。

问题回答

显示:24小时;7月1日至12日 可以通过增加:

.design  {
    padding-left:25px;
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    width: 50px;
    zoom: 1;
    *display:inline;
}

如果你宣布背景评价,则你不能确定特性<代码>。 在<条码>后向> 你们只能把你们的形象联系起来。

或可使用<代码>后继场<>。 类似:

background: url(...) no-repeat top left

use padding like

 padding-left:25px;
    padding-top: 6px;
    padding-bottom: 10px;
    padding-right: 5px;

添加宽度:17px至贵方风格(或以何种宽度为准)





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签