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

随机推荐

ThinkPHP 下如何隐藏index.php
最近一直在做孕妈团的项目,因为部署到实际项目中出现了链接打不开的情况,要默认添加index.php才能正常访问. 当时忘了是Tinkphp的URL重写模式:以后遇到相同问题,首先要想到URL重写模式. ...
Spring Batch学习笔记三：JobRepository
此系列博客皆为学习Spring Batch时的一些笔记: Spring Batch Job在运行时有很多元数据,这些元数据一般会被保存在内存或者数据库中,由于Spring Batch在默认配置是使用H ...
git 远程库命令
git 常用命令在这里就不在说了,初学者点击http://www.cnblogs.com/Vdiao/p/5267250.html Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上 ...
剑指offer：赋值运算符函数和复制构造函数
赋值运算符函数对于定义一个赋值运算符函数时,需要注意一下几点: (1)函数的返回类型必须是一个引用,因为只有返回引用,才可以连续赋值 (2)传入的参数声明为常量引用,可以提高代码效率,同时赋值运算函 ...
centos常用操作
文件夹赋权chmod -R 777 文件夹 zip压缩和unzip解压缩命令详解以下命令均在/home目录下操作cd /home #进入/home目录1.把/home目录下面的mydata目录压缩为m ...
python中的 __slots__
__slots__的作用是防止给class instance分配dict,达到控制instance 成员和节省内存的作用 class Slots(object): __slots__=("n ...
[模板] SAP
int dfs(int x,int flow){ if(x==T) return flow; int tmp=res=0; for(int i=last[x];i;i=next[i]) if (d[x ...
hive的使用03
1.hive中的四种排序 1.1 order by :对全局进行排序,只能有一个reduce select * from hive.employee order by id;
USB OTG插入检测识别
转载请标注原文地址:http://blog.csdn.net/uranus_wm/article/details/9838847 一 USB引脚一般四根线,定义如下: 为支持OTG功能,mini/mi ...
[ Arch Linux ] Arch更新源高速源整理之测速并自动排序高速源加快更新效率
方法一: 工具:rankmirrors 0x01 备份原来的源,并创建一个测试源 cd /etc/pacman.d cp mirrorlist mirrorlist.bakcp mirrorlist ...

ie8下背景图片平铺问题

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

随机推荐

热门专题