CSS：獲取一箇中心定位的流體圖像背景

因爲我一直在擺弄代碼，並且似乎根本沒有任何地方，所以現在這讓我煩惱幾個小時。CSS：獲取一箇中心定位的流體圖像背景

我真的很喜歡這個網站有一個流體圖像背景的方式：

我已經下載的代碼和我不是目前正在製作幻燈片，而是單一的圖像背景，當你玩弄瀏覽器的大小就像在網站中一樣展開和合同。

如果我把他們在他們的CSS中使用的代碼應用到我自己的圖像，我不斷得到這個。

body{ 
     background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960); 
    background-repeat:no-repeat; 
     width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: transparent; 
    background-size: cover; 
    background-position: 50% 50%; 
    background-repeat: none; 
    opacity: 0; 
    z-index: 0; 

     }

可能有人請告訴我怎麼做才能讓我的背景圖像膨脹和收縮有關的網站沒有中心呢？

來源

2017-03-05 Steve Jobs

你想在CSS只，與一些JS會容易得多嗎？並且，你是否希望自己的形象成爲身體的背景？其他選項會更容易和更好 –

老實說，不管最簡單的方法是什麼，我只想要一個空白網頁，除了一個圖像，例如我鏈接到背景上的圖像，所以當您更改瀏覽器的大小時，背景圖像比例是如果有意義的話，與網站中的相同。 –

我現在會發佈一個響應，提供一個小提琴鏈接給你，你將遇到1個問題，你必須處理，圖像的比例，我會爲你留下這個問題！你有很多方法來處理它，所以我不會堅持任何他們的方式 –

這裏是我的回答，它可能不是最容易或最完整的，但它給出了一個非常漂亮的尋找結果回答您的問題

基本上，您可以直接在body 之下創建新的div，並以此方式設計：

.bgimg { 
    z-index: 1; 
    background: url(http://dondev.ovh/light_abstract.jpg); 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background-size: cover; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
}

See it in action

這是一個CSS只能回答，您可以一起使用JavaScript，效果更佳。

Regards

來源

2017-03-06 00:14:12

這完美地回答了我的問題。請問爲什麼Javascript會給我更好的結果，以及如果我以這種方式使用它，是否有什麼我應該擔心的？ –

@SteveJobs你不必擔心任何東西，但圖片的比例..你需要知道你使用的背景圖片如果你有一個可以滾動的頁面考慮改變'位置：絕對'到'位置：固定' Javascript不會給出更好的結果，但是更靈活一個 –

最後，當你談論圖片比例時，你會推薦做什麼？假設我有一個大致風景1920x1080像素的圖像，我需要做什麼？ –

如果您只想讓您的圖片始終充滿網頁，只需從自己的風格中刪除一些東西以實現「封面」效果。

試試這個：

body{ 
    background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960); 
    background-repeat:no-repeat; 
    color: transparent; 
    background-size: cover; 
    opacity: 0; 
    z-index: 0; 
}

https://jsfiddle.net/9cpz4gua/2/

來源

2017-03-06 00:12:58

這對我來說似乎沒有預期的效果，因爲當我在我的.html文件中嘗試它時，並且調整瀏覽器大小時，當瀏覽器變得足夠小時，會出現很多空白， t上面給出的例子是什麼。 –

CSS：獲取一箇中心定位的流體圖像背景

回答

相關問題