具有background-img的CSS不会加载到div中
[英]css with background-img doesn't load into div
问题描述
I have CSS with an image 
我有带图片的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;
}
I have div tag which imports this class 我有导入该类的div标签
<div class="ui-highlight ui-corner-all">
<div class="backgroundImg" style="float:left;">
some text.........
</div>
</div>
EDIT 编辑
I am trying to achieve a bordered box with image on the left and text on the right of the image. 我正在尝试实现一个带边框的框，其中图像的左侧和文本的右侧。 I inspected the element and the image shows up when I hover over the ui-highlight class I know css and honestly I am not a pro at it. 当我将鼠标悬停在我知道css的ui-highlight类上时，我检查了该元素，并且图像显示出来，老实说我不是专业人士。 Can someone help me why the image doesn't show up 有人可以帮我为什么图像不显示吗
UPDATE 更新
After adding width and height to the backgroundImg class the image is visible. 向backgroundImg类添加宽度和高度后，图像可见。
5 个解决方案
解决方案1
2 已采纳 2012-08-07 21:42:38
The first thing I would do is use Firebug for Firefox or the Developer Tools in a Webkit browser to inspect your situation. 我要做的第一件事是使用Firebug for Firefox或Webkit浏览器中的Developer Tools来检查您的情况。
- Right-click on "some text...." and choose Inspect Element . 右键单击“某些文本...”，然后选择“ 检查元素” 。
- In the HTML inspector click on the div with the class "backgroundImg" 在HTML检查器中，单击带有“ backgroundImg”类的div。
- On the right hand side you should see the CSS inspector for this element. 在右侧，您应该看到此元素的CSS检查器。 Hover your mouse over
('./path/file.gif')and see if the image thumbnail loads.将鼠标悬停在('./path/file.gif')，查看图像缩略图是否已加载。 If it doesn't you may have the path set-up incorrectly.如果不是，则可能是路径设置不正确。 - Hover over the div in the HTML inspector and see how it highlights on the page. 将鼠标悬停在HTML检查器中的div上，看看它如何在页面上突出显示。 It may be that your div isn't taking up enough space to reveal the image. 您的div可能没有占用足够的空间来显示图像。 If this is the case you'll need to set a width/height or put more content in the div to fill it out. 如果是这种情况，则需要设置宽度/高度或在div中添加更多内容以进行填充。
- The jQuery UI classes on your parent div (
ui-highlight ui-corner-all) might be setting some styles that obscure the image in the child div.父div（ ui-highlight ui-corner-all）上的jQuery UI类可能正在设置某些样式，这些样式会模糊子div中的图像。 Make sure to inspect this with the HTML/CSS inspector as well.确保也使用HTML / CSS检查器进行检查。
解决方案2
1 2012-08-07 22:03:06
What you're trying to do from your code is give the text with the background of the image. 您尝试从代码中执行的操作是为文本提供图像背景。 It works, but not in the way you're intending. 它可以工作，但不能达到您的预期目的。 Replace the backgroundImg div with an tag in the HTML, with the "align='top'" element. 在HTML中使用“ align ='top'”元素将backgroundImg div替换为标记。 The code I've got is: 我得到的代码是：
<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>
解决方案3
0 2012-08-07 21:40:32
Try using an absolute path: 尝试使用绝对路径：
background: url('/path/from/root/file.gif')
Or: 要么：
background: url('http://example.com/path/from/root/file.gif')
This ensures that there is no ambiguity as to where the image is coming from. 这确保了图像的来源没有歧义。
解决方案4
0 2012-08-07 21:40:48
First of all i would advise you to apply some sort of clearfix. 首先，我建议您应用某种clearfix。 The easy way would be to add overflow:hidden; 最简单的方法是添加overflow:hidden; to your .ui-highlight . 到您的.ui-highlight 。 This is required to give the wrapper some height. 这是给包装纸一定高度的要求。 DDo some searching on clearfix for the how and why. D在clearfix上进行一些搜索，以了解如何以及为什么。
Second a would check if the image is actually getting loaded, your path might be wrong. 第二个a将检查图像是否真正被加载，您的路径可能是错误的。 Checking it in the code inspector from Chrome would be the way for me. 在Chrome的代码检查器中检查它是我的方法。
解决方案5
0 2012-08-07 21:46:29
There's nothing syntactically with your CSS which leads me to believe that the image is not where you specify in your CSS. 您的CSS在语法上没有什么让我相信图像不在您在CSS中指定的位置。 Try an absolute URL or a path relative to the CSS file itself. 尝试使用绝对URL或相对于CSS文件本身的路径。
However: I'm not sure you're going to get the results you're looking for with this CSS, though. 但是：我不确定您是否会通过此CSS获得所需的结果。 If you try changing 如果您尝试更改
background: url('./path/file.gif');
to 至
background: #f00;
you can preview what you're going to get when you get the image url worked out. 您可以在计算出图像网址时预览将要获得的内容。
Since you say that you're trying to get "a bordered box with image on the left and text on the right of the image" you might try something like this: 因为您说的是要获取“带有边框的框，其中图像的左侧，文本的右侧”，所以您可以尝试如下操作：
CSS: 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: HTML：
<div class="ui-highlight">
some text.........
</div>
That would draw a border around the div , add a background image to the top left of the div, then write the text to the right of that image. 这将在div周围绘制边框，在div的左上方添加背景图像，然后在该图像的右侧写入文本。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.