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. 缓存Cache

    转载自  博客futan 这篇文章将全面介绍有关 缓存 ( 互动百科 | 维基百科 )cache以及利用PHP写缓存caching的技术. 什么是缓存Cache? 为什么人们要使用它? 缓存 Cach ...

  2. size_t 和 size_type的区别

    为了使自己的程序有很好的移植性,c++程序员应该尽量使用size_t和size_type而不是int, unsigned 1. size_t是全局定义的类型:size_type是STL类中定义的类型属 ...

  3. 【前端】js代码模拟用户键盘鼠标输入

    js代码模拟用户键盘鼠标输入 原生js var event = new Event('mousewheel'); event.wheelDelta = 360 document.dispatchEve ...

  4. Duilib改进窗口拖动,使整个窗口都能拖动两种方法(转载)

    转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/deta ...

  5. java.lang.classNotFound:明明已经导入了jar包,包里也有该类,却找不到的解决方法

    试一下:在web-inf文件夹下新建lib文件夹:将所有需要用到的jar包放在lib中,重启tomcat.

  6. excel单元格内换行

    强制换行:将光标置于拟换行处,按ALT+Enter键,即可强行换行.

  7. Adding a Controller

    MVC stands for Model, View, Controller. MVC is a pattern for developing applications such that each ...

  8. less文件编译成微信小程序wxss文件

    2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过 ...

  9. JFinal - Log 日志

    今天偶然发现 JFinal 的 Log 简单小巧.上代码. JFinal 在初始化的时候有初始化 Log. class Config { // ... static void configJFinal ...

  10. 插件开发--BE插件开发

    U9的插件主要分为3种,即(1)BE插件(2)UI插件(3)BP/SV插件 1.新建类库解决方案 2.新建插件类,并引用以下dll,UBF安装目录U9.VOB.Product.UBF\UBFStudi ...