Question

我在响应式设计中使用导航栏的背景图像。

.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);
}
}

我得到渐变但原始背景图像不会消失。

Answer 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);
    }
}

如何在bootstrap中使用媒体屏幕？

1 个答案: