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>

修改

我正在尝试使用左侧的图像和图像右侧的文本来创建带边框的框。当我将鼠标悬停在ui-highlight类上时，我检查了元素并显示了图像我知道css，说实话，我不是专业人士。有人能帮助我为什么图像没有显示

更新

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

Answer 1

我要做的第一件事是使用Firefox的 Firebug 或Webkit浏览器中的开发人员工具来检查您的情况。

右键点击“some text ....”并选择检查元素。
在HTML检查器中，单击“backgroundImg”类
在右侧，您应该看到此元素的CSS检查器。将鼠标悬停在('./path/file.gif')上，查看图片缩略图是否加载。如果不是，则可能错误地设置了路径。
将鼠标悬停在HTML检查器中的div上，并查看它在页面上的突出显示方式。可能是你的div没有占用足够的空间来显示图像。如果是这种情况，您需要设置宽度/高度或在div中添加更多内容以填充它。
父div（ui-highlight ui-corner-all）上的jQuery UI类可能会设置一些模糊子div中图像的样式。请务必使用HTML / CSS检查器进行检查。

Answer 2

您尝试从代码中执行的操作是为文本提供图像背景。它有效，但不是你想要的方式。将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>

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上搜索一下如何以及为什么。

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

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

带背景图像的CSS不会加载到div中

5 个答案: