更改基於設備的方向後臺位置

-2

誰能告訴我如何實現這一招在那裏使用的肖像智能手機時，你在你的網頁此背景：更改基於設備的方向後臺位置

然後當在橫向模式圖像將有更廣闊的是這樣的：

來源

2017-06-17 Renz Potpot Sugue

歡迎合作，堆棧溢出，這將是有益的，如果你能提供的代碼的一個例子你正試圖幫助社區回答。 – Buts

我同意你應該發佈代碼，但也 - 你的問題實際上是清楚的 - 這是罕見的... – sheriffderek

要徹底，有很多方法可以做到這一點。在設置img源代碼的某些情況下，JavaScript可能會更有幫助。這就是說，在大多數情況下，你會想使用CSS。你可以閱讀所有的CSS選擇這裏：

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

body { 
 
    background: url(https://placehold.it/500x1000); 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
@media screen and (orientation: landscape) { 
 
    body { 
 
    background: url(https://placehold.it/1000x2000); 
 
    } 
 
} 
 

 
@media screen and (min-width: 1200px) { 
 
    body { 
 
    background: url(https://placehold.it/2000x3000); 
 
    } 
 
}

<!-- body tag is included by default... --> 
 

 
<!-- hey StackSnippet warriors(trolls)... key example here of a bad time to use it -->

來源

2017-06-17 03:44:52 sheriffderek

這將是一個更好的答案沒有snark評論... –

先發制人的罷工。 – sheriffderek

對不起，如果我還沒有發佈任何代碼..但由於sherrifderek我已經實現了我想要的，而無需使用媒體查詢只使用

body { 
background: url(../img/intro-bg2.jpeg); 
background-repeat:no-repeat; 
-webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
     background-size:cover; 
background-position:center top; /*****Just added this*****/ 
}

我不知道如果我遇到任何問題，如果你們有有任何投入/幫助編碼更好，它會被讚賞。謝謝！

編輯：原來我不得不使用

@media screen and (orientation: landscape) { 
body { 
     background-size:cover; 
     background-position:center top; 
} 
}

得到什麼，我想對景觀

來源

2017-06-17 04:09:25

很高興你能把事情做好。你應該檢查Autoprefixer和CSS處理器。它將允許你編寫沒有所有供應商前綴的CSS。保持清晰的縮進也將非常有幫助。：） – sheriffderek

更改基於設備的方向後臺位置

回答

相關問題