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

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

于 2013-02-27T07:58:53.047 回答
2

乍一看，您的锚点和链接似乎没有任何内容，因此隐含的宽度和高度为 0px。

于 2013-02-27T08:11:42.467 回答
0

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

于 2013-02-27T08:03:55.227 回答