在 IE8 下显示拉伸背景

桩白墨
前端笔记
2018-07-13
155热度
0评论

一、Filter

正常情况下，通过 background-size: 100% 100% 来实现背景图片拉伸效果。但是这个属性在 IE8 下不管用。所以要用 filter 来实现这个效果。测试代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Filter</title>
        <style type="text/css" media="screen">
            .container {
                background: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2567434063,520514569&fm=27&gp=0.jpg') fixed no-repeat;
                background-size: 100% 100%;
                width: 100%;
                height: 500px;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2567434063,520514569&fm=27&gp=0.jpg',sizingMethod='scale');
            }
        </style>
    </head>
    <body>
        <div class="container">
            <a href="http://www.baidu.com" target="_blank">baidu</a>
        </div>
    </body>
</html>

二、image 标签

发现一个问题，滤镜会遮挡内部元素。上面那个例子中，在 IE8 下无法点击超链接。为了解决这个问题，我们使用 image 标签来做背景。代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Filter</title>
        <style type="text/css" media="screen">
            .container {
                width: 100%;
                height: 500px;
            }
            .container > image {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <image src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2567434063,520514569&fm=27&gp=0.jpg'></image>
            <a href="http://www.baidu.com" target="_blank">baidu</a>
        </div>
    </body>
</html>