如何以較小的分辨率替換身體背景

我有一個博客模板，我正在作出響應，我如何在較小的分辨率更改身體的背景，我正在嘗試以下，但它不起作用。如何以較小的分辨率替換身體背景

@media (max-width: 30em) { 

    .post-template { 
    background-color: @color_01; 
    } 
}

我的身體有類

<body class="post-template">

其應用於車身顏色造型如下

.BodyColor() { 
background-color: @color_01; 
background-image: url(../images/body.jpg); 
color: @color_05; 
overflow-x: hidden; 
background-attachment: fixed; 
&:after { 
content: ' '; 
width: 100%; 
height: 50%; 
background-color: darken(@color_01, 10%); 
.transform(~"skew(-20deg) rotate(-20deg)"); 
left: 0; 
top: 30%; 
.opacity(0.5); 
position: fixed; 
}

}

我要覆蓋.transform調用的混入，所以在較小的分辨率下不會出現偏差，因爲它顯得太慢

但是我已經設置了body:after僞類的一些屬性，我想在較小的分辨率下進行覆蓋。

來源

2013-10-25 Luke

在媒體查詢中使用px not em以及「@ color_01」是什麼？ –

錯字，現在編輯。 @Chimoo'@ color_01是一個變量較小的變量，在變量中分配了一個十六進制值。 – Luke

是您的LESS的工作嗎？ –

@media screen and (min-width: 30em) { 
    .post-template { 
    background-color: @big_size_color; 
    } 
    .post-template:after { 
    yourcode... 
    } 
} 
@media screen and (max-width: 30em) { 
    .post-template { 
    background-color: @color_01; 
    } 
}

這樣可以保持body:after代碼的顯示，除非頁面大於30em。此規則適用於任何您只想在更高分辨率下工作的任何內容，並在較小分辨率上被「覆蓋」。不要在@media調用之外聲明它自己。

來源

2013-10-25 23:11:18 Deryck

如何以較小的分辨率替換身體背景

回答

相關問題