Question

对于我的生活，我不能让这个工作，任何帮助将不胜感激！

我正在尝试将背景图像应用于div类，由于某种原因图像不会显示，但是当我将相同的图像应用到正文时，它工作得很好，我创建了一个新的html / css文件测试和使用它，请参阅下面的示例。

这有效

HTML

<body>
  <div class="topNav">
    <p>Content here</p>
  </div>
</body>

CSS

body {
  background-image: url("images/topNav-bg.png");
  background-repeat: repeat-x;
}

这不是

<body>
  <div class="topNav">
    <p>Content here</p>
  </div>
</body>

CSS

.topNav {
  background-image: url("images/topNav-bg.png");
  background-repeat: repeat-x;
}

唯一不同的是那个不起作用的那个，是css选择器指向类而不是元素，任何想法为什么它可能是我有这个问题？我已经尝试过将一个ID添加到div中，思考它可能有用的更多特殊性，我也试过让div类宽度和高度100％思考如果设置它会起作用的大小，但它仍然无效，而且，如果是这样的话，肯定不会对身体元素起作用吗？我的css文件是链接的，图像的路径也是正确的，否则当我将css规则应用于body元素时肯定不会起作用？这看起来很基本，但现在已经困扰我多年了！

提前致谢，

杰米

修改

我工作页面中的实际代码如下： 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

.topNav {
    margin: 0px 0px 0px 176px;
    background-image: url('../images/topNav-bg.png') !important;
    background-repeat: repeat-x;
    height: 40px;
    width: 90.83%;
}

我认为这可能是其他干扰的东西，这就是我为什么试图找出问题的例子，但是在我从div中删除了所有其他样式后，它重复了自己。

Answer 1

body div .topNav {
  background-image: url("images/topNav-bg.png");
  background-repeat: repeat-x;
}

我认为这可能有效

Answer 2

您正在使用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>

啊，我忘了，属性repeat-x不适用于div ...

Answer 3

可能有一些继承的样式或类似内容适用于您未向我们展示的ul（例如float），它会折叠内容。

尝试应用以下样式：

.topNav:after {
  content:'';
  clear:both;
  display:block;
}

有时，当样式开始堆叠时，继承成为您需要处理的问题。其中一种情况是您使用float时。然后floated元素可能会折叠并且不会有高度，除非您给它一个或应用类似我建议的样式。

HTML / CSS background-image将应用于元素但不适用于类选择器？

3 个答案: