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
  • 相关阅读:
    获取DIV与浏览器顶部相聚一定位置之后移动DIV
    CSS定位小技巧
    jquery动态样式操作
    Python学习笔记1
    KNN算法的感受 2
    KNN算法的感受 1
    Matplotlib安装感想
    安装numpy只需一步简单的方法
    Ubuntu学习笔记3-图书知识点总结
    Hadoop源码如何查看
  • 原文地址:https://www.cnblogs.com/MissBean/p/ie8-background-size.html
Copyright © 2011-2022 走看看