HTML / CSS背景图片将应用于元素，但不适用于类选择器？
[英]HTML/CSS background-image will apply to element but not a class selector?
问题描述
For the life of me i cannot get this to work, any help will be much appreciated! 
对于我的一生，我无法解决这个问题，我们将不胜感激！
I am trying to apply a background image to a div class, for some reason the image will not show up, yet when i apply the same image to the body, it works perfectly, i have created a new html/css file to test and play around with it, see the examples below. 我正在尝试将背景图像应用于div类，由于某种原因，该图像将不会显示，但是当我将同一图像应用于身体时，它的效果很好，我创建了一个新的html / css文件进行测试并尝试一下，请参见下面的示例。
This works 这有效
HTML 的HTML
<body>
<div class="topNav">
<p>Content here</p>
</div>
</body>
CSS 的CSS
body {
background-image: url("images/topNav-bg.png");
background-repeat: repeat-x;
}
This doesnt 这不
<body>
<div class="topNav">
<p>Content here</p>
</div>
</body>
CSS 的CSS
.topNav {
background-image: url("images/topNav-bg.png");
background-repeat: repeat-x;
}
The only difference in the one that doesnt work to the one that does, is the css selector points to the class and not the element, any idea why it could be that I am having this problem? 不起作用的方法与起作用的方法的唯一区别在于，css选择器指向的是类而不是元素，为什么我可能遇到这个问题呢？ I have tried adding an ID also to the div, thinking with more specifity it might work, I have also tried making the div class width and height 100% thinking if the size is set it would work, but it still does nothing, and also, it surely wouldnt work on the body element if that were the case? 我尝试将一个ID也添加到div中，以更具体的方式考虑可能会起作用，我还尝试将div类的宽度和高度设为100％，考虑是否设置了大小会起作用，但仍然无济于事，并且，如果是这样的话，它肯定不会对身体元素起作用吗？ My css file is linked and path to the image is all correct also, otherwise it surely wouldnt work when I apply the css rule to the body element? 我的css文件已链接，并且图像的路径也都正确，否则当我将css规则应用于body元素时，它肯定无法工作吗？ This seems really basic but has been bugging me for ages now! 这似乎真的很基础，但是已经困扰我好多年了！
Thanks in advance, 提前致谢，
Jamie 杰米
EDIT 编辑
the actual code in my working page is as follows: HTML 我的工作页面中的实际代码如下：HTML
<div class="topNav">
<ul>
<li><a href="#">Log in</a></li>
<li><a href="#">Create account</a></li>
<li><a href="#">Contributions</a></li>
<li><a href="#">Talk</a></li>
<li><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Not logged in</li>
</ul>
</div>
CSS 的CSS
.topNav {
margin: 0px 0px 0px 176px;
background-image: url('../images/topNav-bg.png') !important;
background-repeat: repeat-x;
height: 40px;
width: 90.83%;
}
I thought it may be something else interfering, thats why i made the example to try and isolate the problem, it repeated itself though after I had removed all other styling from the div. 我认为这可能是其他干扰因素，这就是为什么我举这个例子来尝试找出问题的原因，尽管我从div中删除了所有其他样式后，它还是重复了一次。
3 个解决方案
解决方案1
0 已采纳 2016-09-17 16:50:16
body div .topNav {
background-image: url("images/topNav-bg.png");
background-repeat: repeat-x;
}
I think this might work 我认为这可能有效
解决方案2
0 2016-09-17 16:51:51
You are using div, you have to set the height and width. 您在使用div时，必须设置高度和宽度。
<style type="text/css">
.topNav{
background-image: url("http://mejorconsalud.com/wp-content/uploads/2014/06/manzanas.jpg");
background-repeat: repeat-x;
height: 500px;
width: 500px;
}
</style>
Ah, I forget, the property repeat-x dont work with div... 啊，我忘了，属性repeat-x不能与div一起使用...
解决方案3
0 2016-09-17 17:08:42
There are probably some inherited styles or such that apply to the ul that you are not showing us (a float for example), that collapses the content. 可能有一些继承的样式或类似样式适用于您未向我们展示的ul （例如， float ），导致内容折叠。
Try applying the following style: 尝试应用以下样式：
.topNav:after {
content:'';
clear:both;
display:block;
}
Sometimes when styles start stacking up inheritance becomes a problem you need to deal with. 有时，当样式开始堆叠继承时，您就需要解决一个问题。 One such scenario is when you use float s. 一种这样的情况是使用float 。 Then the floated element might get collapsed and wont have height unless you give it one or apply something like the style I suggest here. 然后，除非您给它一个floated元素或应用我在此处建议的样式，否则floated元素可能会塌陷并没有高度。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.