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

随机推荐

PL/SQL Developer主数据库连接和窗口连接切换
Oracle开发者估计对PL/SQL Developer都非常熟悉了,里面有些小的功能点大概还有些初学者没发现.PL/SQL Developer支持多连接多窗口,下面详细说说. 主连接的概念打开PL ...
JNI ReferenceTable overflow
今天在小米设备上遇到如下问题 10-15 17:04:36.899: W/dalvikvm(2767): ReferenceTable overflow (max=512) 10-15 17:04:3 ...
PhpStorm创建Drupal模块项目开发教程（2）
通常支持Drupal HOOK的文件为.module.首先我们需要在这里对它进行声明,以便索引,并且在代码完成中使用Ctrl+Space(空格)完成HOOK实现. Drupal HOOK调用,通常情况 ...
FastJson转换自定义枚举类
在项目中有些状态需要采用枚举类型,在数据库中保存的是name(英文),而前台需要显示的是text(中文). 所以这就需要自己去实现序列. 例如对象: import java.util.Date; im ...
c# winform DirectX播放器可以任意设置宽高比屏幕拉伸
第一步:dll引用 Microsoft.DirectX.dll Microsoft.DirectX.AudioVideoPlayback.dll 如果没有的话,可能需要安装微软的DRECTX JDK ...
简单介绍MR21和MR22
MR21和MR22都可以用来调整价格,MR21是更改的单个物料的价格,MR22更改的是库存总价值,所以MR21可以更改移动平均价(V)或标准价(S)的物料价格.MR22只能更改移动平均价(V)的物料价 ...
刚知道的android属性
在EditText中当设置的高度是wrap_parent,但是随着我们输入的越来越多,编辑框会被拉伸的很丑,所以就用了maxLines属性,设置maxLines="2"说明最多输入 ...
Hibernate的关联映射
单向N-1关联 <many-to-one> 单向N-1关系,比如多个人对应同一个住址,只需要从人实体端找到对应的住址实体,无须关系某个地址的全部住户.程序在N的一端增加一个属性,该属性引用 ...
21-React的学习
# React的学习 React概述: React是一个用于构建用户界面的JavaScript库. React主要用于构建UI,很多人认为React是MVC中的V(视图). React起源于Faceb ...
我要谈对象之——JavaScript面向对象（1）
任何语言里都有面向对象,除了个别的.今天,我要说的是javascript中面向对象. 什么是面向对象? 计算机中的一切算法和逻辑都是源于生活中的,对象,这个抽象的概念并不是男同胞理解的妹子哈,对象,无 ...

ie8下背景图片平铺问题

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

随机推荐

热门专题