圖像不完全顯示在主體上的背景

實施例：http://jsbin.com/opokev/20 圖像不完全顯示在主體上的背景

完整圖像：http://i53.tinypic.com/347a8uu.jpg

正如你可以看到，我有一個用於報頭偏移的body和主體具有圖像背景。但是，圖像並未完整顯示。

問題：我可以用CSS做些什麼，以便顯示整個圖像，或者是否需要使用Gimp或photoshop來縮小圖像。目前它是1400 x 1050像素。

來源

2011-08-16 yogashi

您的jsbin鏈接不工作 –

現在請嘗試。請讓我知道是否縮小圖像，或者我應該在CSS中做些什麼。如果我必須縮小圖像，那麼什麼是理想尺寸 – yogashi

下面是當前正在使用的屏幕分辨率列表：http://gs.statcounter.com/#resolution-ww-monthly-201007-201107 –

我認爲你試圖讓圖像適合窗口，即使這意味着我法師被扭曲。

您可以使用background-size屬性來達到此效果。但不是cover您將其設置爲100% 100%。現場示例：http://jsbin.com/opokev/21/

body { 
    background: url(http://i53.tinypic.com/347a8uu.jpg) no-repeat center fixed; 
    background-position: 0px 85px; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
}

來源

2011-08-16 15:25:40 tw16

CSS2現在允許您縮放背景圖片。您可以使用media query，並根據用戶的分辨率呈現不同的圖像。

BTW：報價不需要URL參數：

background-image: url(http://s1.postimage.org/gkkq9uc17/Sketch2.jpg);

來源

2011-08-16 14:19:19

我不明白......我遇到的問題不是解決方案，而是我的形象從底部被削減。 – yogashi

在您的例子，沒有被顯示在所有圖像。我懷疑這是因爲您正在使用postimage.org來託管圖片，並且它們阻止了來自外部域（您的示例）的圖片請求。如果將URL替換爲我自己的服務器上託管的圖像，則使用您設置的屬性顯示圖像背景。我會建議使用不同的圖像主機。

您正在使用的CSS3 background-size: cover;屬性將根據水平寬度按比例縮放圖像以填充瀏覽器。應該沒有必要預先縮放圖像，雖然這可能不總是給你最漂亮的結果。

來源

2011-08-16 14:37:31

我已更改主持人並更新了鏈接。所以要得到最漂亮的結果，我應該縮小原始圖像？什麼是好的維度？還是試錯？ – yogashi

這取決於您希望用戶下載多少 - 您可以將其保留爲當前的大小，並且可以縮小任何較小的瀏覽器窗口的大小，但這將是相當大的文件大小。當你在比圖像更寬的窗口上放大時，圖像外觀會出現問題，但是你不能真正避免這種情況。通過調整您的瀏覽器來測試它 - 這應該會導致背景縮放。 –

注意：background-size：cover;只能在最近的瀏覽器中正常工作。此外，它會根據寬度成比例地縮放，因此如果您的瀏覽器在全屏顯示器上全屏顯示，則圖像底部將在瀏覽器底部處於屏幕外。有關如何設置這種靈活背景的更多信息，請點擊此處：http://kimili.com/journal/the-flexible-scalable-background-image-redux –

是的，你可以使用HTML和CSS做一些伎倆，但你的形象必須要在標籤：

CSS：

html, body, #body { height:100% } 

    #body { position:relative } 

    img { 
    position:absolute; 
    width:100%; 
    height:100%; 
    display:block; 
    z-index:1; 
    } 

    div#masthead { 
    background-color: #262626; 
    height: 85px; 
    padding: 0; 
    width: 100%; 
    margin: 0; 
    z-index:2; 
    position:relative 
    }

HTML：

<body> 
    <img src="http://i53.tinypic.com/347a8uu.jpg"> 
    <div id="masthead"></div> 
</body>

檢查jsbin：http://jsbin.com/izenah/edit#javascript,html

來源

2011-08-16 15:05:01

這就是我想要的！然而，有了這個，我不能有我的標題 – yogashi

@yogashi看到更新 –

@yogashi你可以在頭部圖像的高度圖像中放置一個額外的空白 –

圖像不完全顯示在主體上的背景

回答

相關問題