css背景图片不显示在DIV [英] css background image not showing in DIV

问题描述

如果我这样做：

  .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'）; 
} 
  

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

如何来？

解决方案

尝试将您的HTML更改为

 < div class ='floatingBox'> 
< div class ='effect2'> 
< a href ='/ Devis / moto'class ='摩托车'>< / a> 
< / div> 
< / div> 
  

和您的css到

  .motorbike {
 display：block; 
 position：relative; 
 background-image：url（'../图像/ car.png'）; 
 background-repeat：no-repeat; 
 background-position：center; 
 
 width：/ *在此处放置一个非零宽度值* /; 
 height：/ *在这里放一个非零的高度值* /; 
} 
  

说明： < a> 标签可以代替< div> 标签，如果将其显示属性设置为块... $ c>< a> 默认为 display：inline ）

要设置宽度和高度，因为该div中没有​​内容。

一般来说，在css中避免级联样式..有关

的详细讨论，请参见此处。

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 ?

解决方案

try changing you html to

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

and your css to

.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)

you also want to set the width and height since there is no content inside that div.

in general its a good idea to avoid cascading in your css styles.. see here for a detailed discussion of that

这篇关于css背景图片不显示在DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！