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

時間 2019-11-12

標籤 css hack 前傳背景圖片全屏欄目 CSS 简体版

原文原文鏈接

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

前世此生

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

放上去後一看藝術家就是藝術家，果然和Theme很搭並且讓網站高端了不少（自我感腳），興沖沖的就發佈了上去，主要代碼大概是這樣的web

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

很不錯的樣子express

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

細心的同窗立刻就明白爲何了，圖片在縱向上repeat了，而圖片上下邊的顏色不同，在相接的地方不吻合，腫麼辦呢?測試

修改背景圖片

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

改變背景圖片size

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

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

效果是這樣的spa

聰明的同窗第一時間就會想到你讓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);

哎呀媽呀，真好使

本身以爲很完美了，可可可，人家說你的效果已經不對了。

神馬！納尼！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>

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

擦，你高度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;
            }

此次我按捺住了，拉了滾動條纔敢樂

可是隻樂了幾秒，由於我看了一下IE。。。，尼瑪！

關於怪異模式

由於網站是好久前寫的代碼，你們標準意識沒有那麼前衛，處於對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了。最後偷偷上傳個實際效果圖