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>

ie8下背景图片平铺问题的更多相关文章

  1. Duilib技巧：背景图片平铺

    贴图的描述 方式有两种    // 1.aaa.jpg    // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...

  2. Android中设定背景图片平铺。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很 ...

  3. 一款js控制背景图片平铺

    背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...

  4. Android设置背景图片平铺

    以LinearLayout为例,它提供的background属性将会将背景图片拉伸,相当难看.其实我们仅仅需做少量的改动就能够实现web编程中css背景图片的效果.来试试吧. 创建反复的背景图片 在d ...

  5. IE6 IE8下背景图片不显示问题

    更改background:url()no-repeat; 去掉no-repeat即可解决问题!

  6. Android: 背景图片平铺要这么干

    <?xml version="1.0" encoding="utf-8"?>  <bitmap xmlns:android="htt ...

  7. CSS背景横向平铺BUG，解决方法

    给定DIV一个背景图片横向平铺,缩小浏览器,拉动横向滚动条,此时触发此BUG:背景图片平铺不完整 解决办法: 1.把背景图片写在BODY上,此办法局限于没有使用iframe的情况下,所以少用 2.设定 ...

  8. CSS背景100%平铺 浏览器缩小背景显示不全解决办法

    本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...

  9. [UWP]通过自定义XamlCompositionBrushBase实现图片平铺

    1. 什么是XamlCompositionBrushBase 我早就想试试自定义XamlCompositionBrushBase,但一直没机会.上一篇文章介绍到使用Win2D的BorderEffect ...

随机推荐

  1. 227 Entering Passive Mode (xxx,xxx,,xxx,xxx,x)

    登录ftp时显示227 Entering Passive Mode (xxx,xxx,,xxx,xxx,x) 因为FTP有两种工作模式,PORT方式和PASV方式,中文意思为主动式和被动式 ,详细介绍 ...

  2. SQLite的优化总结

    网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下. 1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2 ...

  3. 关于UIView的显示问题

    今天在倒腾PP助手SDK的接入,游戏框架使用的是cocos2d-x,因为不熟悉iOS的UIKit,所以费了点功夫终于让SDK的登录页面显示出来了,问题来了,在iOS设备landscape显示模式UI显 ...

  4. 下载最新版本的Oracle Database

    直接访问Oracle的官网就可以找到,鉴于Oracle经常改到下载面也我这里直接粘贴下载地址 http://www.oracle.com/technetwork/database/enterprise ...

  5. cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)

    目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop ...

  6. IE兼容性的注意点

    IE会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的 getElementById的参数在IE8及较低的版本不区分大小写 IE7及 ...

  7. input标签file的value属性IE兼容性问题

    在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...

  8. jQuery 增加 删除 修改select option .

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

  9. TRUNCATE TABLE (Transact-SQL)

    删除表中的所有行,而不记录单个行删除操作. TRUNCATE TABLE 与没有 WHERE 子句的 DELETE 语句类似:但是,TRUNCATE TABLE 速度更快,使用的系统资源和事务日志资源 ...

  10. 【POJ2886】Who Gets the Most Candies?-线段树+反素数

    Time Limit: 5000MS Memory Limit: 131072K Case Time Limit: 2000MS Description N children are sitting ...