bootstrap背景圖 - css背景圖




在後台拉伸和縮放CSS圖像-僅限CSS (12)

CSS3有一個很好的小屬性叫做background-size:cover

這會縮放圖像,使背景區域完全被背景圖像覆蓋,同時保持縱橫比。 整個區域將被覆蓋,但如果調整大小的圖像的寬度/高度太大,則圖像的一部分可能不可見

我希望我的背景圖像可以根據瀏覽器視口大小進行拉伸和縮放。

我已經看到了Stack Overflow的一些問題,比如拉伸和縮放CSS背景 。 它運作良好,但我想要使用background放置圖像,而不是使用img標記。

在那一個img標籤被放置,然後用CSS我們致敬img標籤。

width:100%; height:100%;

它的工作原理,但這個問題有點老,並指出在CSS 3調整背景圖像將工作得很好。 我已經嘗試了第一個例子 ,但它並沒有為我工作。

有沒有一種好的方法來處理background-image聲明?


CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

你可以使用CSS3屬性來做得很好。 它調整比例,所以沒有圖像失真(雖然它確實高檔的小圖像)。 請注意,它尚未在所有瀏覽器中實現。

background-size: 100%;

你想僅僅使用一個圖像來實現這一點? 因為實際上你可以使用兩個圖像使其與拉伸背景有點類似。 例如PNG圖像。

我之前做過這件事,並沒有那麼難。 另外,我認為伸展會損害背景的質量。 如果你添加一個巨大的圖像,它會減慢計算機和瀏覽器的速度。


使用我提到的代碼 ...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

這產生了預期的效果:只有內容會滾動,而不是背景。

背景圖像調整為瀏覽器視口的任何屏幕大小。 當內容不適合瀏覽器視口,並且用戶需要滾動頁面時,內容滾動時背景圖像在視口中保持固定。

用CSS 3看起來這會容易得多。


使用這個CSS:

background: url('img.png') no-repeat; 
background-size: 100%;

您可以使用img標籤實際獲得與背景圖像相同的效果。 您只需將z-index設置為低於其他值,設置position:absolute並為前景中的每個框使用透明背景。


您可以將此類添加到您的CSS文件中。

.stretch {
            background: url(images/bg.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
}

它適用於:

  • Safari 3或更高版本
  • Chrome隨時隨地
  • Internet Explorer 9或更高版本
  • Opera 10或更高版本(Opera 9.5支持background-size ,但不支持關鍵字)
  • Firefox 3.6或更高版本(Firefox 4支持非供應商前綴版本)

我同意100%寬度和高度的絕對div中的圖像。 確保在CSS中為身體設置了100%的寬度和高度,並將邊距和填充設置為零。 使用此方法可以發現另一個問題,即選擇文本時,選擇區域有時可能包含背景圖像,這會使完整頁面具有選定狀態的不幸效果。 你可以通過使用user-select:none CSS規則來解決這個問題,就像這樣:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

同樣,Internet Explorer在這裡也是壞人,因為它無法識別用戶選擇選項 - 即使Internet Explorer 10預覽也不支持它,所以您可以選擇使用JavaScript來阻止背景圖像選擇(例如, http://www.felgall.com/jstip35.htm )或使用CSS 3背景拉伸方法。

另外,對於SEO我會將背景圖片放在頁面的底部,但是如果背景圖片加載時間過長(即最初使用白色背景),則可以移動到頁面的頂部。


我想中心和縮放背景圖像,而不是將其延伸到整個頁面,並且我希望保持寬高比。 這對我來說很有用,這要歸功於其他答案中提出的變化:

在線圖像:------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}


謝謝!

但之後它不適用於谷歌瀏覽器Safari瀏覽器(拉伸工作,但圖片的高度只有2毫米!) ,直到有人告訴我什麼缺點:

嘗試設置height:auto;min-height:100%;

所以改變你的height:100%; 線,給出:

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

就在新添加的代碼之前,我在Drupal Tendu主題style.css有這個代碼:

html,body {height:100%;}

#page {背景:#FFFFFF; 高度:自動!重要;高度:100%;最小高度:100%;位置:相對;}

然後,我必須在Drupal中添加一個新的塊,並添加class=stretch

<img alt =“”class =“stretch”src =“pic.url”/>

只需用該Drupal塊中的編輯器複製圖片即可; 必須將編輯器更改為非格式文本。







background