zoukankan      html  css  js  c++  java
  • ie8下背景图片平铺问题

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

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

    仅需如下代码:

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='../img/news/news-banner.png',
    sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='../img/news/news-banner.png',
    sizingMethod='scale');

    eg:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="renderer" content="webkit" />
      <title>投影仪-新闻中心</title>
      <style type="text/css">
      *{margin: 0;padding: 0;}
        .news-banner{
            width:100%;
            height:225px;
            background-position:50%;
            background-size:cover;
            background-repeat: no-repeat;
            background-image:url(news-banner.png);
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='news-banner.png',
            sizingMethod='scale');
            -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='news-banner.png',
            sizingMethod='scale');
        }
      </style>
    </head>
    <body>
      <div class="news-banner">    
      </div>
    </body>
    </html>
    View Code
  • 相关阅读:
    QT学习1
    时域和频域
    win10 + VS2017 + MNN 编译使用
    深度学习笔记(二十二)Structure-Preserving Neural Style Transfer
    miRNA分析
    mRNA分析
    代谢组学分析
    实证分析
    React---新扩展RenderProps和ErrorBoundary
    React---新扩展Context和组件优化
  • 原文地址:https://www.cnblogs.com/MissBean/p/ie8-background-size.html
Copyright © 2011-2022 走看看