• CSS3 background-size属性兼容


    background-size是CSS3新增的属性,但是IE8以下还是不支持


    background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比);
    background-size :cover; // 扩展图片来填满元素(保持像素的长宽比);
    background-size :100px 100px; // 调整图片到指定大小;

    background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元素的尺寸。

     

    浏览器兼容:

    IE 和遨游不支持;

    Firefox 添加私有属性 -moz-background-size 支持;

    Safari 和 Chrome 添加私有属性 -webkit-background-size 支持;

    Opera 不支持 background-size 属性,添加其私有属性 -o-background-size 也不支持。

    一、让IE7 IE8支持CSS3 background-size属性

      由于 background-size 是 CSS3 新增的属性,所以 IE 低版本自然就不支持了,但是老外写了一个 htc 文件,名叫 background-size polyfill,使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中,并重新计算宽度、高度、left、top 等值,模拟 background-size 的效果。

    使用方法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>让IE7 IE8支持CSS3 background-size属性</title>
        <style>
            html {
                height: 100%;
            }
            body {
                height: 100%;
                margin: 0;
                background: url(http://cdn.dowebok.com/139/images/bg.jpg) center no-repeat;
                background-size: cover;
                -ms-behavior: url(css/backgroundsize.min.htc);
                behavior: url(css/backgroundsize.min.htc);
            }
        </style>
    </head>
    
    <body>
    
    </body>
    </html>

    局限性

    background-size polyfill 虽然可以模拟 background-size 属性,但并不能完全模拟,毕竟 background 方式和 img 方式还是有区别的,主要的支持情况如下:

    支持

    • 背景图像的正确位置和大小
    • 浏览器缩放时及时更新
    • 更新图片(替换等)时及时更新

    不支持

    • 多个背景(多重背景)
    • 4 个值的 background-position
    • 背景重复
    • 非默认值的 background-[clip/origin/attachment/scroll]

    由于 background-size polyfill 需要进过复杂的计算,所以可能会出现图片“一闪”的情况。并且 .htc 文件还不能跨域,使用 CDN 的需要注意。

    虽然 background-size polyfill 有一定的局限性,但总比没有好,在某些情况下还是一个很好的选择。

    二、让IE8支持CSS3 background-size属性

    通过滤镜来实现这样的一个效果。

         100%;
        min-height: 100%;
        background: url("../images/map.png") no-repeat;
        background-size: 100% 100%;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='file:///E:/idea-project/html/nongkeyuan/assets/images/map.png',
                sizingMethod='scale'); 

    注:路径要是绝对路径

  • 相关阅读:
    在Google Colaboratory中安装Python 3.8内核
    视频下载工具annie
    google colab及基本使用
    huggingface transformers预训练模型如何下载至本地,并使用
    colab使用
    python虚拟环境下安装包命令
    opencv 3.4.1.15版本安装(最后一个含有sift,surf的版本)
    文本生成:基于GPT2的中文新闻文本生成
    创建虚拟环境 virtualenvwrapper
    在Google Colaboratory中安装Python 3.8内核
  • 原文地址:https://www.cnblogs.com/hjbky/p/7472249.html
Copyright © 2020-2023  润新知