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

随机推荐

C#面向编程的三大特征
在面向对象的编程中,首先要清楚地理解面向对象编程的三个基本特征: 封装, 继承, 多态! 1.封装更确切地说,是对象封装.就是每个对象都包含自己进行某种操作时所需要的所有信息,而不依赖于其他对象来完 ...
DataGridView
一.实现CheckBox列. 1.1 增加CheckBox列: 在DataGridView中增加CheckBox列: 注意:设置ColumnType类型和设置FalseValue为0,TrueValu ...
AC6102 DDR2测试工程
AC6102 DDR2测试工程本文档介绍AC6102上DDR2存储器基于Verilog代码的测试过程.AC6102上使用了2片16bit的DDR2存储器组成了32bit的硬件总线.虽然是32bit硬 ...
const、static和extern的正确使用方式
我们在看一些大牛的第三方时,里面会出现很多const.static和extern,尤其是const和static,const和extern的结合使用,直接令很多小伙伴懵逼了,今天就详细讲解一下这三个关 ...
如何站在使用者的角度来设计SDK-微信公众号开发SDK（消息处理）设计之抛砖引玉
0.SDK之必备的基本素质在项目中免不了要用到各种各样的第三方的sdk,在我现在的工作中就在公司内部积累了各种各样的的公共库(基于.net的,基于silverlight的等等),托管到了内部的nug ...
HTML 5 视频
HTML 5 视频 ======================================================================================= 如今 ...
term2 配置
item2是mac下非常好用的一款终端.但默认的配色实在不好用,经过一翻搜索终于找到了比较满意的. 1.先要修改~/.bash_profile.代码如下 2.选择喜欢的配色方案. 在Preferenc ...
CentOS 6.6安装配置LAMP服务器(Apache+PHP5+MySQL)
准备篇: CentOS 6.6系统安装配置图解教程 http://www.osyunwei.com/archives/8398.html 1.配置防火墙,开启80端口.3306端口 vi /etc/s ...
webpack详细配置讲解
//常见的Webpack配置文件var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugi ...
定长循环队列C语言实现
#ifndef _CONST_H_#define _CONST_H_ #include <stdio.h>#include <stdlib.h> typedef enum { ...

ie8下背景图片平铺问题

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

随机推荐

热门专题