如何在引导程序中使用媒体屏幕？答案

【问题标题】：How to use media screen in bootstrap?如何在引导程序中使用媒体屏幕？
【发布时间】：2015-05-25 14:13:25
【问题描述】：

我在响应式设计中使用背景图片作为导航栏。

.navbar {
   background-image: url(http://www.sample.com/images/bg.png);
   background-repeat: repeat-x;

  }

我希望背景图像在 960 像素处关闭并使用渐变背景。

    @media (min-width: 960px) {
.navbar {
 background-image: -webkit-linear-gradient(top, #4f72a8 0%, #040aa5 100%);
 background-image: linear-gradient(to bottom, #4f72a8 0%, #040aa5 100%);
 background-repeat: repeat-x;
 filter:    progid:DXImageTransform.Microsoft.gradient
 (startColorstr='#ffffffff',   endColorstr='#ffdfdfdf', GradientType=0);
}
}

我得到了渐变，但原始背景图像没有消失。

【问题讨论】：

标签： twitter-bootstrap navigation

【解决方案1】：

我认为您必须在开始时重置背景。这应该适合你。

@media (min-width: 960px) {
    .navbar {
        background-image: none;

        background-image: -webkit-linear-gradient(top, #4f72a8 0%, #040aa5 100%);
        background-image: linear-gradient(to bottom, #4f72a8 0%, #040aa5 100%);
        background-repeat: repeat-x;
        filter:    progid:DXImageTransform.Microsoft.gradient
            (startColorstr='#ffffffff',   endColorstr='#ffdfdfdf', GradientType=0);
    }
}

【讨论】：