具有background-img的CSS不会加载到div中

Question

我有带图片的CSS

.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标签

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

编辑

我正在尝试实现一个带边框的框，其中图像的左侧和文本的右侧。 当我将鼠标悬停在我知道css的ui-highlight类上时，我检查了该元素，并且图像显示出来，老实说我不是专业人士。 有人可以帮我为什么图像不显示吗

更新

向backgroundImg类添加宽度和高度后，图像可见。

Answer 1

我要做的第一件事是使用Firebug for Firefox或Webkit浏览器中的Developer Tools来检查您的情况。

1. 右键单击“某些文本...”，然后选择“ 检查元素” 。
2. 在HTML检查器中，单击带有“ backgroundImg”类的div。
3. 在右侧，您应该看到此元素的CSS检查器。 将鼠标悬停在('./path/file.gif') ，查看图像缩略图是否已加载。 如果不是，则可能是路径设置不正确。
4. 将鼠标悬停在HTML检查器中的div上，看看它如何在页面上突出显示。 您的div可能没有占用足够的空间来显示图像。 如果是这种情况，则需要设置宽度/高度或在div中添加更多内容以进行填充。
5. 父div（ ui-highlight ui-corner-all ）上的jQuery UI类可能正在设置某些样式，这些样式会模糊子div中的图像。 确保也使用HTML / CSS检查器进行检查。

Answer 2

您尝试从代码中执行的操作是为文本提供图像背景。 它可以工作，但不能达到您的预期目的。 在HTML中使用“ align ='top'”元素将backgroundImg div替换为标记。 我得到的代码是：

<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>

Answer 3

尝试使用绝对路径：

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

要么：

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

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

Answer 4

首先，我建议您应用某种clearfix。 最简单的方法是添加overflow:hidden; 到您的.ui-highlight 。 这是给包装纸一定高度的要求。 D在clearfix上进行一些搜索，以了解如何以及为什么。

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

Answer 5

您的CSS在语法上没有什么让我相信图像不在您在CSS中指定的位置。 尝试使用绝对URL或相对于CSS文件本身的路径。

但是：我不确定您是否会通过此CSS获得所需的结果。 如果您尝试更改

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

至

background: #f00;

您可以在计算出图像网址时预览将要获得的内容。

因为您说的是要获取“带有边框的框，其中图像的左侧，文本的右侧”，所以您可以尝试如下操作：

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的左上方添加背景图像，然后在该图像的右侧写入文本。