CSS hack前傳——背景圖片全屏

謙行發表於2013-08-31
CSS

在之前的部落格CSS hack中我有提到，一個問題的解決讓我對CSS hack的態度從不屑一顧，到認真研究了實驗一下，事情是這樣的，最近產品釋出，向來狂妄的我被一個bug糾纏住了，甚至喪氣的表示我做不出來，說來也慚愧，難住我的並不是造火箭這樣的難題，只是個背景圖片。。。

前世今生

最近為產品做了一個扁平化的新Theme，看起來很美觀，公司的藝術家看後表示需要一張有深意的背景圖片，發給我了

image

放上去後一看藝術家就是藝術家，果真和Theme很搭而且讓網站高階了很多（自我感腳），興沖沖的就釋出了上去，主要程式碼大概是這樣的

<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            body
            {
                height:100%;
                width:100%;
                background:url(images/bg.png);
            }
        </style>
    </head>
    <body>
        
    </body>
<html>

很不錯的樣子

image

然而釋出到產品測試站點後我的悲催一天就開始了，當頁面有縱向滾動條的時候，網頁是這樣的

image

細心的同學馬上就明白為什麼了，圖片在縱向上repeat了，而圖片上下邊的顏色不一樣，在相接的地方不吻合，腫麼辦呢?

修改背景圖片

相信大部分同學第一反應和我一樣，讓藝術家換個圖片,把圖片上下邊、左右邊的顏色修的一樣就可以了，但是！但是。。。藝術家不為所動,堅持這樣是最好的效果，好吧，展示技術的時候到了。

改變背景圖片size

既然圖片還得是這張圖片，那麼就改變它的大小，讓其拉伸鋪滿整個網頁，使用window在設桌布的時候不經常這麼幹嘛，可可可怎麼該背景圖片的大小呢，用CSS3吧

background:url(images/bg.png);
-moz-background-size:cover;
-ms-background-size:cover;
-webkit-background-size:cover;
background-size:cover;

效果是這樣的

image

聰明的同學第一時間就會想到你讓IE可咋整？是呀，江湖傳言這樣就可以

background:url(images/bg.png);
-moz-background-size:cover;
-ms-background-size:cover;
-webkit-background-size:cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/bg.png,sizingMethod=scale);

哎呀媽呀，真好使

image

自己覺得很完美了，可可可，人家說你的效果已經不對了。

神馬！納尼！Where！

在IE下效果是對了，但是Chrome、Firefox下本來應該在中間的高亮區cover效果原因整個圖片長寬都被拉伸而被移到了右上角，不對稱了。。。

這這這

這可腫麼辦，逼我，嚼爛了我的HB鉛筆後我寫了這樣的程式碼（程式碼寫在MasterPage中，所以不必擔心逐個頁面更改問題）

<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            body
            {
                height:1000px;
                width:100%;
                margin:0;
            }
            
            .cover
            {
                width:100%;
                height:100%;
                position:absolute;
                z-index:-10;
            }
            
            .cover img
            {
                width:100%;
                height:100%;
                border:0;
            }
        </style>
    </head>
    <body>
    <div class="cover">
        <image alt="" src="images/bg.png"/>
    <div>
    </body>
</html>

乍一看效果我還蠻開心的，可一拉滾動條

image

擦，你高度100%計算的是ViewPort的高度，不是scrollHeight啊！

固定住圖片

咬碎了一隻HB之後我想到一招，既然剛才的方法差點兒都好使了，只有滾動的時候不好使，那麼讓圖片相對於螢幕固定住就可以了，不隨網頁滾動而動，也就是使用position:fixed不就搞定了嗎

body
            {
                height:1000px;
                width:100%;
                margin:0;
            }
            
            .cover
            {
                width:100%;
                height:100%;
                position:fixed;
                z-index:-10;
            }
            
            .cover img
            {
                width:100%;
                height:100%;
                border:0;
            }

這次我按捺住了，拉了滾動條才敢樂

image

但是隻樂了幾秒，因為我看了一下IE。。。，尼瑪！

image

關於怪異模式

因為網站是很久前寫的程式碼，大家標準意識沒有那麼前衛，處於對table 100%計算與padding衝突等原因，在設計的時候沒有加doctype，這就是耳聞能祥的怪異模式！

IE6本身就不支援position:fixed，這個還好，公司產品針對美國市場，不用相容IE6了，但是IE所有版本在怪異模式下也不支援position:fixed，聰明的同學肯定會說前面你不說有MasterPage了嗎，在裡面加上DocType不就可以了，我也是這麼想的，但卻沒這麼做，加上後之前寫的大部分控制元件還有很多頁面佈局會亂掉，唉！一著不慎，滿盤皆輸，不能加DocType，腫麼辦。。。

CSS hack

等了這麼久主角CSS hack終於可以登場了，虧我沒去學導演，主角要指定砍我，也不必太激動，剛才不是使用-moz-神馬的了嗎，也算是露臉兒了，這次讓它領銜，看看怎麼使用CSS hack讓怪異模式的IE也能有類似於position:fixed的效果

.cover
        {
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: -10;
            _position: absolute;
            _top: expression(eval(document.body.scrollTop));
            _left: expression(eval(document.body.scrollLeft));
        }

本來字首”_”只有IE6能夠認識，不過在怪異模式下所有IE都能認識，所以IE下hack程式碼會覆蓋上面的程式碼，可以expression表示式瞭解一下，還有在怪異模式下document.documentElement.scrollHeight這樣的寫法是取不到正確結果的，得像上面document.body.scrollTop這麼寫，聰明的同學如果看過CSS hack也能夠很輕鬆的寫出正常模式下的code了。最後偷偷上傳個實際效果圖

image

最後

就是這麼個東東，讓我對CSS hack有了新的認識

相關文章