0

我有带有图像的 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 类添加宽度和高度后，图像可见。

4

5 回答 5

2

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

  1. 右键单击“some text....”并选择Inspect Element。
  2. 在 HTML 检查器中，单击“backgroundImg”类的 div
  3. 在右侧，您应该会看到该元素的 CSS 检查器。将鼠标悬停在上方('./path/file.gif')，查看图像缩略图是否加载。如果不是，则您的路径设置可能不正确。
  4. 将鼠标悬停在 HTML 检查器中的 div 上，看看它是如何在页面上突出显示的。可能是您的 div 没有占用足够的空间来显示图像。如果是这种情况，您需要设置宽度/高度或在 div 中放置更多内容以填充它。
  5. 父 div ( ) 上的 jQuery UI 类ui-highlight ui-corner-all可能会设置一些样式，这些样式会遮挡子 div 中的图像。确保也使用 HTML/CSS 检查器进行检查。
于 2012-08-07T21:42:38.217 回答
1

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

尝试使用绝对路径：

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

或者：

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

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

于 2012-08-07T21:40:32.477 回答
0

首先，我建议您应用某种 clearfix。简单的方法是添加overflow:hidden;到您的.ui-highlight. 这是给包装器一些高度所必需的。DDo 搜索 clearfix 的方式和原因。

第二个 a 会检查图像是否真的被加载了，你的路径可能是错误的。在 Chrome 的代码检查器中检查它对我来说是一种方式。

于 2012-08-07T21:40:48.853 回答
0

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

但是：不过，我不确定您是否会使用此 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 的左上角添加一个背景图像，然后在该图像的右侧写入文本。

于 2012-08-07T21:46:29.493 回答