CSS hack前传——背景图片全屏

àì夳堔傛蜴生んèń 2021-12-16 02:17 258阅读 0赞

在之前的博客[CSS hack][]中我有提到，一个问题的解决让我对CSS hack的态度从不屑一顾，到认真研究了实验一下，事情是这样的，最近产品发布，向来狂妄的我被一个bug纠缠住了，甚至丧气的表示我做不出来，说来也惭愧，难住我的并不是造火箭这样的难题，只是个背景图片。。。

### 前世今生 ###

最近为产品做了一个扁平化的新Theme，看起来很美观，公司的艺术家看后表示需要一张有深意的背景图片，发给我了

[![image][]][image 1]

放上去后一看艺术家就是艺术家，果真和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 2]][image_image 2]

然而发布到产品测试站点后我的悲催一天就开始了，当页面有纵向滚动条的时候，网页是这样的

[![image][image 3]][image_image 3]

细心的同学马上就明白为什么了，图片在纵向上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][image 4]][image_image 4]

聪明的同学第一时间就会想到你让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][image 5]][image_image 5]

自己觉得很完美了，可可可，人家说你的效果已经不对了。

神马！纳尼！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][image 6]][image_image 6]

擦，你高度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][image 7]][image_image 7]

但是只乐了几秒，因为我看了一下IE。。。，尼玛！

[![image][image 8]][image_image 8]

### 关于怪异模式 ###

因为网站是很久前写的代码，大家标准意识没有那么前卫，处于对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表达式][expression]了解一下，还有在怪异模式下**document.documentElement.scrollHeight**这样的写法是取不到正确结果的，得像上面**document.body.scrollTop**这么写，聪明的同学如果看过[CSS hack][]也能够很轻松的写出正常模式下的code了。最后偷偷上传个实际效果图

[![image][image 9]][image_image 9]

### 最后 ###

就是这么个东东，让我对CSS hack有了新的认识

转载于:https://www.cnblogs.com/dolphinX/p/3292997.html

[CSS hack]: http://www.cnblogs.com/dolphinX/p/3292630.html
[image]: /images/20211214/7c217787efe64fd9aa2c7afbdcee1b81.png
[image 1]: https://images0.cnblogs.com/blog/349217/201308/31115117-9a0373aaa7b64be6beb2fd6e41997b81.png
[image 2]: https://images0.cnblogs.com/blog/349217/201308/31115146-fca22d7dc1a04e45a5c9e9d2608d631c.png
[image_image 2]: /images/20211214/dae4af73fbb7437b964ee775d259158f.png
[image 3]: https://images0.cnblogs.com/blog/349217/201308/31115210-df9953b7363740e6ab73fda9be05db76.png
[image_image 3]: /images/20211214/ada40df82fa3465cb344deeeb4415c3a.png
[image 4]: https://images0.cnblogs.com/blog/349217/201308/31115237-c041a6d0f8a74f24aeb8f3d4e245b9ef.png
[image_image 4]: /images/20211214/c4d4f9384908454bb5c3a98332e169bd.png
[image 5]: https://images0.cnblogs.com/blog/349217/201308/31115309-7da553779cdb4b8c8654d50099a8d3b2.png
[image_image 5]: /images/20211214/98ea4fd763c7435e858aae3f5fb77b14.png
[image 6]: https://images0.cnblogs.com/blog/349217/201308/31115327-eb1e8294bc3e469eb20d5277c6db4785.png
[image_image 6]: /images/20211214/f9e3ed32667e4e84961486d0b1b2f35d.png
[image 7]: https://images0.cnblogs.com/blog/349217/201308/31115413-fda514eaab8d4d4aac9c45952389a679.png
[image_image 7]: /images/20211214/0768d147ea1f43ca86e1316d1f396738.png
[image 8]: https://images0.cnblogs.com/blog/349217/201308/31115427-d409c3cd97f54628a1edfa9d71da4bdc.png
[image_image 8]: /images/20211214/2181b3b8849442f988b63cd39961c819.png
[expression]: http://baike.soso.com/v52918064.htm
[image 9]: https://images0.cnblogs.com/blog/349217/201308/31140615-7e6f0a8e72ba4b72a3e6b9fcdeb98d9b.png
[image_image 9]: /images/20211214/aa55420e067b4e7f839538ac3a2653f9.png