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 ...

随机推荐

Lombok 安装、入门 - 消除冗长的 java 代码
lombok 提供了简单的注解的形式来帮助我们简化消除一些必须有但显得很臃肿的 java 代码. lombok 的官方网址:http://projectlombok.org/ lombok 安装1. ...
初始angular框架（1）
作为一个从来没有使用过的angular框架的小白第一步肯定是看文档! 没错就是看文档了!
Linux命令的返回码列表
转自:http://blog.chinaunix.net/uid-10347480-id-3263127.html 在 Linux 下,不管你是启动一个桌面程序也好,还是在控制台下运行命令,所有的程序 ...
简单谈谈eclipse下搭建PhoneGap环境来开发Android程序 - linux86(转)
原来在逛园子的时候一不小心发现了一个新概念“PhoneGap”简称PG,我一直都喜欢追逐新事物,自然就产生了好奇心.于是乎我就在百度上面Google了一下PhoneGap是什么东西.简单的说就是用另一 ...
[OSG]矩阵运算
我们都知道,OpenGL规定矩阵使用列主序存储,即glLoadMatrix等函数要求输入的数组是按列主序存储的矩阵.然而,一个很奇怪的事实是,OSG中矩阵存储是使用的标准C二维数组(行主序),并且也是 ...
C++内存泄露之野指针
写出本文仅仅是处于备忘的目的. 最近为现在做的软件添加了一个内存回收机制(以前处于某种内存只申请不释放,这并不等于内存泄露,因为我们知道这些内存块在内存中的位置)-- 在某一块内存不使用的时候将其释放 ...
分页sql优化
如果分页sql里包含排序: select * from (...order by id) where rownum <=20 因为要排序,所以即使是分页只取20条,执行计划还是要把所有满足条件的 ...
如何阅读android framework源码
但如果想深入的了解Android系统, 那么可以看下我的一些简单的总结. 知识 Java Java是AOSP的主要语言之一. 没得说, 必需熟练掌握. 熟练的Android App开发 Linux A ...
Fisher–Yates shuffle 洗牌(shuffle)算法
今天在敲undersore的源码,数组里面有一个shuffle,把数组随机打乱. _.shuffle = function(obj) { var set = isArrayLike(obj) ? ob ...
设计一个泛型类Collection
要求:设计一个泛型类Collection,它存储object对象的集合(在数组中),以及该集合当前的大小.提供public方法isEmtpy,makeEmpty,insert,remove,isPre ...

ie8下背景图片平铺问题

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

随机推荐

热门专题