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');
}

その後、背景画像は表示されなくなります。

どうして ？

4

4 に答える 4

5

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 */ ;
}

説明：表示プロパティをブロックに設定すると、タグをタグの代わりに使用できます。（<a>デフォルトは）<div><a>display:inline

そのdiv内にはコンテンツがないため、幅と高さも設定する必要があります。

一般に、cssスタイルでのカスケードを避けることをお勧めします。詳細については、こちらを参照してください。

于 2013-02-27T08:08:55.327 に答える
2

一見すると、アンカーとリンクにはコンテンツがないように見えるので、暗黙的に0pxの幅と高さがあります。

于 2013-02-27T08:11:42.467 に答える
2

リンク タグ内に div を配置しないでください。外に置いてください。

于 2013-02-27T07:58:53.047 に答える
0

まず、divの終了タグはアンカータグの内側にあります。次に、アンカータグ内にコンテンツが表示されません（空のタグであるため、寸法などはありません）。つまり、リンクタグにテキストがないのとまったく同じように、非表示になります（表示するものがないため）。 ）。

于 2013-02-27T08:03:55.227 に答える