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了。最后偷偷上传个实际效果图

最后

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