2018年7月13日

在 IE8 下显示拉伸背景

一、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>

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注


*