0

我的目标是使用媒体查询更改某些浏览器大小的背景图像......我还需要它来覆盖元素样式，所以我需要在我的背景图像标签之后有 !important......

这是到目前为止..

@media only screen and (min-width : 690px) and (max-width : 1000px) {
    #featured article[data-background-cover="1"] {
        background-image: url('#')!important;    
    }
}

上面的代码似乎工作..但我需要背景图像重复...我怎样才能添加它，同时仍然保留！重要。

我尝试了几种方法，但似乎不起作用..喜欢

@media only screen and (min-width : 690px) and (max-width : 1000px) {
    #featured article[data-background-cover="1"] {
        background-image: url('#')repeat!important;    
    }
}

和

@media only screen and (min-width : 690px) and (max-width : 1000px) {
    #featured article[data-background-cover="1"] {
        background-image: url('#')!important repeat;    
    }
}

任何帮助将不胜感激..谢谢

4

3 回答 3

1

尝试这个：

background-image: url('#');
background-repeat: repeat;

你也可以试试这个：

background-image: url('#');
background-repeat: repeat !important;

W3学校

于 2013-07-19T07:43:24.140 回答
0

您将!important与空格放在一起，并在每个属性的末尾。

但是，如果可能，请尽量避免!important整体并订购您的样式，以便正确应用这些样式。

于 2013-07-19T07:43:36.153 回答
0

假设您有一个容器，并且您希望根据设备屏幕分辨率应用不同的样式。

#container {
        /* triggered by all devices */
}

@media only screen and (min-width : 690px) and (max-width : 1000px) {
       #container { 
           /* triggered by devices with specified width */
       }
}

因此，第一个选择器将应用于所有设备，如果特定媒体查询匹配，则此选择器将被覆盖。最好遵循添加样式的顺序，因为它们是从上到下呈现的，因此如果您有两个具有不同样式的相同选择器，则下方的选择器将具有最高优先级。

无论如何，这是正确的属性简写符号background：

background: #000 url() repeat fixed left top !important;

顺序：背景色、背景图、重复、位置、X位置、Y位置、重要；

于 2013-07-19T08:04:03.533 回答