html - 在css中隐藏一个内联图像并在屏幕较小时显示另一个

Question

我的问题是，当我全屏显示页面时，我需要它来显示标题图像和导航栏。但是当它缩小以供移动使用时，我需要它显示不同的标题。问题是我可以同时显示两个图像，这看起来很奇怪。或者我无法显示。我尝试分配和 id 以在 css 中调用但没有运气。使用发布的代码，它既不显示，但如果我取出标题 img 不显示，它们都会显示。第一次发帖在这里，如果有任何混淆，我很抱歉 这是我的 html

  <header>

     <nav class="horizontal">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Courses</a></li>
           <li><a href="#">Events</a></li>
           <li><a href="#">Facilities</a></li>
           <li><a href="#">Membership</a></li>
           <li><a href="#">Tee Times</a></li>
           <li><a href="#">Restaurant</a></li>
        </ul>
     </nav>

     <img src="willet.png" alt="Willet Creek" />

  </header>

这是我的 CSS

header nav, header img,  #main, aside, footer {
    display: none;
}

/*mobile styles */

html {
        background-color: rgb(107,  140, 80);
}

/*header styles */
header {
    background: rgb(151, 201, 151) url(willet.jpg) left center no-repeat;
    -o-background-image-size: contain;
    -moz-background-image-size: contain;
    -webkit-background-image-size: contain;
    background-image-size: contain;
    background-image-width: 100%;
    background-image-height: 50px;
}

Answer 1

您需要使用媒体规则。请参见 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

例子

header{
    background: url('image.jpg')
}
@media screen and (max-width: 400px) {
    header{
        background: url('image-2.jpg')
    }
}