Question

我对css很新，我在本地工作，所以我无法提供确切的地址，但是这里有：

我正在使用具有响应式布局的wpexplorer adapt theme。我在style.css中设置了包装器背景，如下所示：

    #wrap{
    background: url(images/scribble-top.jpg) center top no-repeat #fff;
    margin: 0 auto;
    width: 1040px;
    padding: 0 30px;
}

当我进入responsive.css开始设计其他视点时，我想在平板电脑纵向视图中使用新的背景图像作为包装div，但出于某种原因，新图像现在将显示（只是保持空白）当我将它缩小到移动视口时，再次出现style.css背景。这是我的编码：`

/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 740px */
@media only screen and (min-width: 768px) and (max-width: 959px) {

body {background: #000;}
    #wrap {background: url(images/scribble-top-680.jpg) no-repeat center top #fff; width: 680px; overflow:inherit;}
    .hp-highlight, .portfolio-item, .home-entry, #footer-one,#footer-two,#footer-three,#footer-four{ width: 155px;  }
    #home-tagline{ font-size: 21px; }
    #search { text-indent: -9999px; }
    .loop-entry-thumbnail{width: 35%;}

}

应该注意的是，新图像是新包装div大小的确切宽度，并且高度不是相对的，因为它只是包装器顶部的横幅类型图像，因此不应干扰包装div高度。

我做错了什么？

先谢谢你的帮助！ `

Answer 1

在你的背景声明之后添加！important如下：

#wrap {
    background: url(images/scribble-top-680.jpg) no-repeat center top #fff !important; 
    width: 680px;
    overflow:inherit; 
}

响应式设计 - 新的背景图像不会显示在较小的视口中

1 个答案: