美文网首页
ie8 背景图居中显示

ie8 背景图居中显示

作者: _信仰zmh | 来源:发表于2018-04-19 20:55 被阅读34次

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover;

    但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景图片拉伸问题。

    background-position: 图片展示得中心位置。

    *主要是添加filter属性

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='路径',
    sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='路径',
    sizingMethod='scale');
    
    .header .banner {
        text-align:left;
        min-width:80%;
        margin:0 auto;
        height: 480px;
        background-position:50% 0%\9;
            background-size:cover\9;
        background-image:url("../img/banner.png");
        background-repeat: no-repeat;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='../img/banner.png',
            sizingMethod='scale');
        -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='../img/banner.png',
        sizingMethod='scale');
    }
    

    相关文章

      网友评论

          本文标题:ie8 背景图居中显示

          本文链接:https://www.haomeiwen.com/subject/ktegkftx.html