Html css背景图像未显示在DIV中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15106808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css background image not showing in DIV
提问by Sam
If I do that:
如果我这样做：
.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>
then the background image shows up fine.
然后背景图像显示正常。
However if I do:
但是，如果我这样做：
.floatingBox div div {
text-align: center;
position: relative;
background-repeat: no-repeat;
background-position: center;
}
.motorbike {
background-image: url('../images/moto.png');
}
then, the background image does not show up any longer.
然后，背景图像不再显示。
How come ?
怎么来的 ？
回答by abbood
try changing you html to
尝试将您的 html 更改为
<div class='floatingBox'>
<div class='effect2'>
<a href='/Devis/moto' class='motorbike'></a>
</div>
</div>
and your css to
和你的 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 */ ;
}
explanation:an <a>tag can take the place of a <div>tag if you set its display property to block.. (<a>defaults to display:inline)
解释：一个<a>标签可以采取的地方<div>，如果你设置它的显示属性设置为块标记。（<a>默认display:inline）
you also want to set the width and height since there is no content inside that div.
您还想设置宽度和高度，因为该 div 中没有内容。
in general its a good idea to avoid cascadingin your css styles.. see herefor a detailed discussion of that
一般来说，避免在您的 css 样式中进行级联是一个好主意。有关详细讨论，请参见此处
回答by Mario
You should not put a div inside a link tag. Put it outside.
你不应该在链接标签中放置一个 div。把它放在外面。
回答by Dan Ovidiu Boncut
At the first look it seems that your anchor and link don't have any content so implicit there is 0px width and height.
乍一看，您的锚点和链接似乎没有任何内容，因此隐含的宽度和高度为 0px。
回答by Malyo
Well first of all your div closing tag is inside anchor tag. Second of all, there's no content displaying inside your anchor tag (it's just empty tag, so it doesn't have dimensions etc.), which means exactly like there's no text in your link tag - making it hidden (since there's nothing to display)
首先，您的 div 结束标记位于锚标记内。其次，您的锚标签内没有显示任何内容（它只是空标签，所以它没有尺寸等），这意味着就像您的链接标签中没有文本一样 - 将其隐藏（因为没有任何内容可显示） )
