CSS背景-IMG不加载到DIV

我有CSS与图像CSS背景-IMG不加载到DIV

.backgroundImg { 
    background: url('./path/file.gif'); 
    background-repeat: no repeat; 
    width: 24px; 
    height: 24px; 
} 

.ui-highlight { 
    border: 2px solid green; 
    color: #363636; 
    padding: 0.7em; 
}

我有进口这类

<div class="ui-highlight ui-corner-all"> 
    <div class="backgroundImg" style="float:left;"> 
     some text......... 
    </div> 
</div>

编辑

我div标签我试图实现一个边框，左边是图像，右边是文字。我检查了元素，当我将鼠标悬停在ui-highlight类上时，图像显示出来了。我知道css，老实说我不是专业人员。有人能帮助我，为什么图像不显示

UPDATE

增加宽度和高度与backgroundImg类的图像是可见后。

来源

2012-08-07 user525146

我会做的第一件事就是用萤火虫为Firefox或开发工具在WebKit浏览器来检查您的情况。在

右键单击“一些文本......”，然后选择检查元素。
在HTML检查器中点击class为“backgroundImg”的div
在右侧，您应该看到此元素的CSS检查器。将鼠标悬停在('./path/file.gif')上，查看图像缩略图是否加载。如果没有，您可能会错误地设置路径。
将鼠标悬停在HTML检查器的div上，看看它在页面上的亮点。这可能是因为你的div没有占用足够的空间来显示图像。如果是这种情况，您需要设置一个宽度/高度或在div中添加更多内容以填充它。
父div（ui-highlight ui-corner-all）上的jQuery UI类可能会设置一些遮挡子div中图像的样式。请确保使用HTML/CSS检查器检查此项。

来源

2012-08-07 21:42:38

我检查了元素，当我将鼠标悬停在CSS类ui-highlight上时，图像加载完毕。图像大小为24x24px。 – user525146 2012-08-07 21:46:21

**当您将鼠标悬停在类** backgroundImg **的div上时，您的**图片应该加载完毕。图像可能会从** ui-highlight **加载，但这可能是jQuery UI附带的图像。 – 2012-08-07 21:49:38

抱歉，我的意思是说backgroundImg类。由于某些原因，当我在萤火虫中看到div类时，它透明，这意味着它由于某种原因而被隐藏起来。 – user525146 2012-08-07 21:55:38

尝试使用绝对路径：

background: url('/path/from/root/file.gif')

或者：

background: url('http://example.com/path/from/root/file.gif')

这确保了没有歧义，以在图像的来源。

来源

2012-08-07 21:40:32

首先，我会建议你应用某种clearfix。简单的方法是将overflow:hidden;添加到您的.ui-highlight。这是要求包装的高度。 D做一些关于clearfix的搜索方式和原因。

第二个将检查图像是否实际上正在加载，您的路径可能是错误的。在Chrome的代码检查器中检查它将是我的方式。

来源

2012-08-07 21:40:48 Pevara

没有什么语法与您的CSS，这导致我相信图像不是你在CSS中指定的地方。尝试绝对URL或相对于CSS文件本身的路径。

但是：虽然我不确定你会得到你想要的结果。如果你尝试改变

background: url('./path/file.gif');

到

background: #f00;

你可以预览你要当你的图像URL摸索出得到什么。

既然你说你正在试图获得“与左边和文字上的图像的右侧图像的边界框”，你可以尝试这样的事：

CSS：

.ui-highlight { 
    background: url('http://www.site.com/file.gif') top left no-repeat; 
    border: 2px solid green; 
    color: #363636; 
    padding: 0.7em; 
    padding-left: 90px; /* This should be the width of the background image */ 
}

HTML：

<div class="ui-highlight"> 
    some text......... 
</div>

这将绘制边框div周围，背景图像添加到div的左上角，然后写的文字到IMA权GE。

来源

2012-08-07 21:46:29 Jason

你试图从你的代码中做的是给文本背景的图像。它有效，但不符合你的意图。将backgroundImg div替换为HTML中的标签，并使用“align ='top'”元素。我得到的代码是：

<html> 
<head> 
<style type="text/css"> 

.ui-highlight { 
    border: 2px solid green; 
    color: #363636; 
    padding: 0.7em; 
} 
</style> 
</head> 
<body> 
<div class="ui-highlight"> 
    <img src="path/img.gif" style="padding:0px;" align="top"> 
     some text......... 
    </br> 
</div> 
</body> 
</html>

来源

2012-08-07 22:03:06 InvisibleUp

CSS背景-IMG不加载到DIV

回答

相关问题