Question

我的问题是，当我将页面全屏显示时，我需要它来显示标题图像和导航栏。但是当移动使用它缩小时，我需要它来显示不同的标题。问题是我可以让两个图像都显示出来，这看起来很奇怪。或者我无法显示。我尝试在css中分配和id来调用，但没有运气。使用已发布的代码，它既不会显示，但如果我取出标题img display none，它们都会显示出来。首先发布在这里，所以如果有任何混淆我很抱歉这里是我的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')
    }
}

Answer 2

您需要使用媒体查询来处理它。您的示例：http://jsfiddle.net/vLp6tv5e/请记住，您需要调整页面大小以使其正常工作。

HTML：

<header>
</header>

CSS：

header
{
    height:100px;
    background-image:url('big-image.jpg');
}

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

在屏幕较小时隐藏css中的内嵌图像并显示另一个图像

2 个答案: