使用CSS向div添加背景图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (31)

我一直试图使用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');
}

这是一个阴影的图像,我使用它在网站的顶部,所以它不一定有一个特定的宽度。

提问于
用户回答回答于

你需要添加一个width和一个height的背景图像,以使其正确显示。

例如

.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是一个虚拟值,你需要用你的图像的实际值来替换它。

用户回答回答于

给出高度和宽度:

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

扫码关注云+社区

领取腾讯云代金券