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 ...
- Android中设定背景图片平铺。
注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很 ...
- 一款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 ...
随机推荐
- 缓存Cache
转载自 博客futan 这篇文章将全面介绍有关 缓存 ( 互动百科 | 维基百科 )cache以及利用PHP写缓存caching的技术. 什么是缓存Cache? 为什么人们要使用它? 缓存 Cach ...
- size_t 和 size_type的区别
为了使自己的程序有很好的移植性,c++程序员应该尽量使用size_t和size_type而不是int, unsigned 1. size_t是全局定义的类型:size_type是STL类中定义的类型属 ...
- 【前端】js代码模拟用户键盘鼠标输入
js代码模拟用户键盘鼠标输入 原生js var event = new Event('mousewheel'); event.wheelDelta = 360 document.dispatchEve ...
- Duilib改进窗口拖动,使整个窗口都能拖动两种方法(转载)
转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/deta ...
- java.lang.classNotFound:明明已经导入了jar包,包里也有该类,却找不到的解决方法
试一下:在web-inf文件夹下新建lib文件夹:将所有需要用到的jar包放在lib中,重启tomcat.
- excel单元格内换行
强制换行:将光标置于拟换行处,按ALT+Enter键,即可强行换行.
- Adding a Controller
MVC stands for Model, View, Controller. MVC is a pattern for developing applications such that each ...
- less文件编译成微信小程序wxss文件
2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过 ...
- JFinal - Log 日志
今天偶然发现 JFinal 的 Log 简单小巧.上代码. JFinal 在初始化的时候有初始化 Log. class Config { // ... static void configJFinal ...
- 插件开发--BE插件开发
U9的插件主要分为3种,即(1)BE插件(2)UI插件(3)BP/SV插件 1.新建类库解决方案 2.新建插件类,并引用以下dll,UBF安装目录U9.VOB.Product.UBF\UBFStudi ...