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>

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

Duilib技巧：背景图片平铺
贴图的描述方式有两种 // 1.aaa.jpg // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...
一款js控制背景图片平铺
背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...
Android设置背景图片平铺
以LinearLayout为例,它提供的background属性将会将背景图片拉伸,相当难看.其实我们仅仅需做少量的改动就能够实现web编程中css背景图片的效果.来试试吧. 创建反复的背景图片在d ...
IE6 IE8下背景图片不显示问题
更改background:url()no-repeat; 去掉no-repeat即可解决问题!
Android: 背景图片平铺要这么干
<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="htt ...
CSS背景横向平铺BUG，解决方法
给定DIV一个背景图片横向平铺,缩小浏览器,拉动横向滚动条,此时触发此BUG:背景图片平铺不完整解决办法: 1.把背景图片写在BODY上,此办法局限于没有使用iframe的情况下,所以少用 2.设定 ...
CSS背景100%平铺浏览器缩小背景显示不全解决办法
本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章. 把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺 ...
[UWP]通过自定义XamlCompositionBrushBase实现图片平铺
1. 什么是XamlCompositionBrushBase 我早就想试试自定义XamlCompositionBrushBase,但一直没机会.上一篇文章介绍到使用Win2D的BorderEffect ...

随机推荐

自定义指令-directive (转)
1.指令作用域中的@ 作用是把当前属性作为字符串传递. 前台代码: <div ng-controller="MyCtrl"> <drink water ...
Windows访问Ubuntu14.04远程桌面全攻略
最近接到一个任务,在Ubuntu系统下开发一个串口读写程序.开发要在台式机上进行,安装UbuntuKylin 14.04,并且在串口连接了设备.个人使用的是笔记本电脑,系统是Windows8.1.自然 ...
EF 数据初始化
数据库不存在时重新创建数据库: Database.SetInitializer<testContext>(new DropCreateDatabaseAlways<testConte ...
IIS Express 配置外部访问
IIS Express是Visual Stuido自带的微型Web服务器,简单易用. IIS Express默认只允许本机访问,通过Visual Studio调试Web程序时,我们有时需要通过外部访问 ...
头疼：为什么chrome不能访问本地文件（带--disable-web-security --allow-file-access-from-files ）
如题,寻求帮助! chrome 带参数启动 --disable-web-security --allow-file-access-from-files 照理应该可以加载本地文件,找遍google和英 ...
Monkey的ADB命令简单使用示例和解析
进行简单的压力测试: 1. adb shell monkey –p 包名 –v-v 3000 >E:\bugLog.txt -v -v 标识打印的日志的详细级别为2级,更高级有3级,也可以用1级 ...
阿里云CDN刷新预热接口
阿里云OSS映射的文件地址需要即时访问到最新数据,需要即时调用CDN的刷新预热类接口 RefreshObjectCaches 刷新接口. 参考官方接口文档资料:https://help.aliyun. ...
Node.js怎么处理数据库中日期类型
问题描述:在数据库里存储时间的时候明明显示的是类如2016-12-22的形式,读取出来后却变成了大概是这样的:Fri May 17 2016 14:12:33 GMT+0800 (中国标准时间) 处理 ...
类加载机制(深入理解JAVA虚拟机学习笔记)
1.类加载机制的定义将class文件加载到内存,然后对class文件中的数据进行校验.解析和初始化,转换成可以被虚拟机直接使用的JAVA类型,这就是虚拟机的类加载机制.(在JAVA中,类的加载.连接 ...
一看便知spring+quartz定时任务
这是我经过网上收集然后加上自己的测试写的,以便大家使用标配:已测注意需要的包:(在已经配置spring 的情况下) quartz-all-1.6.jar spring-context ...

ie8下背景图片平铺问题

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

随机推荐

热门专题