0

私の目標は、メディアクエリを使用して特定のブラウザサイズで背景画像を変更することです....要素スタイルもオーバーライドする必要があるため、 background-image タグの直後に !important が必要です...

これがこれまでの..

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

上記のコードは機能しているようですが、背景画像を繰り返す必要があります... !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;

W3Schools

于 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 */
       }
}

したがって、最初のセレクターがすべてのデバイスに適用され、特定のメディア クエリが一致する場合、このセレクターは上書きされます。上から下にレンダリングされるスタイルを追加する順序に従うことをお勧めします。そのため、スタイルが異なる 2 つの同一のセレクターがある場合、下にあるセレクターが最も優先度が高くなります。

backgroundとにかく、これはプロパティの正しい省略表記です。

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

順序:背景色、背景画像、繰り返し、位置、位置 X、位置 Y、重要。

于 2013-07-19T08:04:03.533 に答える