CSS背景图片在DIV中未显示

Question

CSS背景图片在DIV中未显示

3

如果我这样做：

.floatingBox div div {
   text-align: center;
   position: relative;
   background-image: url('../images/car.png');
   background-repeat: no-repeat;
   background-position: center;
}

<div class='floatingBox'>
    <div class='effect2'>
        <a href=/Devis/moto><div class='motorbike'></div></a>
    </div>
</div>

如果我这样做：

那么背景图片就会正常显示。

但是如果我这样做：

.floatingBox div div {
   text-align: center;
   position: relative;
   background-repeat: no-repeat;
   background-position: center;
}

.motorbike {
    background-image: url('../images/moto.png');
}

然后，背景图片不再显示。

为什么？

- Sam

只是猜测，.motorbike 背景是否被顶部的背景覆盖了，因为它具有更详细的路径？尝试指定底部的背景，或将顶部的背景属性替换为 .motorbike。 - Toon Casteele

你能否提供JSFiddle来帮助我们帮助你吗？ - bumerang

检查您的浏览器元素。我假设您知道如何操作。检查您的CSS属性是否在您想要的位置。乍一看，一切似乎都很好。我的唯一问题是，链接与div是否具有某些宽度和高度。我非常确定它们是0像素乘以0像素。 - Dan Ovidiu Boncut

4个回答

2

不应该将 div 放在链接标签内部，应该放在外面。

- Mario

谢谢回复。如果我这样做，就没有东西可以点击了。另外，你确定这是背景图片无法显示的原因吗？ - Sam

如果您提供a{display: block; height: 50px; width: 50px}，它应该有所帮助-我打错了。 - bumerang

把 div 放在链接标签里有什么问题吗？只要必要，我就这样做。 - abbood

@fredsbend：旧版浏览器一直支持这种行为。此外，使用带有<!DOCTYPE html>的文档来解析旧版浏览器中的标签混乱也没有任何危害。 - igor

除了让代码变得混乱之外，我认为@igor的方法只会产生垃圾代码。我坚信标签混乱、hack等都是不必要的，除非标准尚未支持某个功能。虽然这些知识很好，但我从未尝试过，因为我认为结果会很糟糕。 - user1934286

显示剩余4条评论

2

一开始看起来，您的锚点和链接似乎没有任何内容，因此隐式宽度和高度为0像素。

- Dan Ovidiu Boncut

正确！现在使用@abbod的代码并在锚点标签内添加一些字符串，背景图像就会显示出来。但是它很丑，因为1）我不想让任何文本出现，2）背景图像为150px * 100px，因此容器需要具有该大小。有什么想法吗？ - Sam

强制它。将您的.motorbike大小设置为：宽度：150像素，高度：100像素。 - Dan Ovidiu Boncut

是的，它确实起作用了。我会将abbod的回答标记为答案，因为最终我一直在使用他的代码，并且他在回答中添加了宽度和高度，而我一开始没有看到。非常感谢大家的帮助！ - Sam

0

首先，你的 div 结束标签在锚点标签内部。其次，在你的锚点标签内没有显示任何内容（它只是一个空标签，因此没有尺寸等），这意味着就像你的链接标签中没有文本一样 - 这使得它隐藏起来（因为没有可显示的东西）。

- Malyo

好的，没问题。我已将 HTML 修改为：<div class='floatingBox'><div class='effect2'><div class='motorbike'><a href=/Devis/moto>test</a></div></div></div> 但是，这并没有改变任何事情。如果我在它自己的 CSS 类中设置背景路径，则背景图像不会显示出来。现在唯一的区别是 DIV 中显示了字符串“test”，这不是我想要的。我可以使用 IMG 标签并将其放在锚标记中，这样就可以正常工作，但我想使用 DIV 上的 background-image CSS 属性。你认为这是个坏主意吗？ - Sam

尝试添加 display: block 属性。 - Malyo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- abbood · Accepted Answer

尝试将您的HTML更改为：

<div class='floatingBox'>
    <div class='effect2'>
        <a href='/Devis/moto' class='motorbike'></a>
    </div>
</div>

你需要将你的CSS与之配合。

.motorbike {
    display: block;
    position: relative;
    background-image: url('../images/car.png');
    background-repeat: no-repeat;
    background-position: center;

    width: /* put a non-zero width value here */ ;
    height: /* put a non-zero height value here */ ;
}

解释：如果将标签的display属性设置为block，它可以替代

标签。（默认的display属性为inline）

由于该div内部没有内容，因此您还需要设置其宽度和高度。

一般来说，最好避免在CSS样式中进行层叠。详细讨论请参见这里。