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

前端之家收集整理的这篇文章主要介绍了使用CSS将背景图像添加到div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在试图添加背景图像到使用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');
}

附加信息:

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

解决方法

您需要添加背景图像的宽度和高度才能正确显示

例如,

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

正如你提到的,你正在使用它作为一个阴影,你可以删除宽度和添加背景重复(垂直或水平,如果需要)。

例如,

.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是一个虚拟值,您需要将其替换为您的图像的实际值。

原文链接:https://www.f2er.com/css/220614.html

猜你在找的CSS相关文章