css - 使用CSS将背景图像添加到div

Question

我一直在尝试使用 CSS 将背景图像添加到 div 类，但没有成功。

HTML代码:

<header id="masthead" class="site-header" role="banner">
    <div class="header-shadow"></div>
        <hgroup></hgroup>
        <nav role="navigation" class="site-navigation main-navigation">

        </nav><!-- .site-navigation .main-navigation -->
</header><!-- #masthead .site-header -->

CSS:

.header-shadow{
    background-image: url('../images/header-shade.jpg');
}

附加信息:

这是一张带阴影的图片，我在网站顶部使用它，所以它不能有特定的宽度。

Answer 1

您需要添加背景图片的宽度和高度才能正常显示。

例如，

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    width: XXpx;
    height: XXpx;
}

正如您提到的将其用作阴影，您可以删除 width 并添加 background-repeat(如果需要，垂直或水平)。

例如，

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    background-repeat: repeat-y; /* for vertical repeat */
    background-repeat: repeat-x; /* for horizontal repeat */
    height: XXpx;
}

PS:XX 是一个虚拟值。您需要将其替换为图像的实际值。