css3:让IE兼容background-size的方法

最新推荐文章于 2020-09-04 18:46:19 发布
最新推荐文章于 2020-09-04 18:46:19 发布
阅读量152 收藏
点赞数
原文链接：http://www.cnblogs.com/luodiandian/p/7551567.html
版权

background-size为css3属性，用于设置背景图片的宽和高，但ie6，ie7，ie8下对css background-size并不支持，那么如何在ie下兼容background-size呢？

在ie下把图片完整的居中显示在一定范围内

在css中添加如下代码：

1
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src= '/image/xxx.jpg' , sizingMethod= 'scale' );

完整实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
< html >
< head >
< meta  charset = "UTF-8" >
< title >让IE兼容background-size的方法</ title >
  
< style >
.bgpic {
     background-image: url('http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg');
     background-size: cover;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='http://img0.bdstatic.com/img/image/6992fdda3cc7cd98d10273a6b34233fb80e7aec90cc.jpg',
     sizingMethod='scale');
}
</ style >
</ head >
< body >
  
     < div   class = "bgpic"  style = "width:200px;height:100px;" ></ div >
  
</ body >
</ html >

转载于:https://www.cnblogs.com/luodiandian/p/7551567.html

dianyingba2258
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Background-size完美兼容IE
weixin_39037804的博客
09-17 565
CSS3 新增的 background-size 是一个很有用的属性，用于定义背景图片的尺寸，有了这个属性，你就可以任意指定背景图片的大小。其中最常用的值应该要数 cover 了，该值能让背景图片缩放...
IE浏览器兼容background-size
weixin_30262255的博客
07-31 136
background-size是CSS3新增的属性，IE8以下不支持，通过滤镜实现background-size效果 background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；background-size ：100px 100px; // 调整图片到指定大小...
background-size兼容ie
webZRH的博客
05-18 648
1.最好使用背景图尺寸正好的 2.引入文件 background-image: url(../img/ui-user.png); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/ui-user.png',sizingMethod='scale')"; filter: 
IE8下兼容background-size方法
zhpeng289的博客
07-30 1万+
background-size: length|percentage|cover|contain;IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。 CSS3 新增的 background-size 是一个很有用的属性，用于定义背景图片的尺寸，有了这个属性，你就可以任意指定背景图片的大小。其中最常用的值应该要...
IE下滤镜实现background-size效果
BiuBiu_Tian(田)
09-27 1601
IE下的滤镜实现背景图片的background-size效果，修正IE出现双背景的样式。
解决XP IE8不支持css3的background-size问题实例
04-06
总结起来，解决XP IE8不支持CSS3 `background-size`问题的关键在于理解浏览器的兼容性限制，利用渐进增强策略，以及合理运用如CSS滤镜这样的技术手段。通过这种方式，我们可以确保在不同浏览器和操作系统上都能提供...
css div实现的遮罩层完美兼容IE6-IE9 FireFox
09-25
本篇文章将详细介绍如何使用CSS和div元素来创建一个兼容IE6到IE9以及Firefox的遮罩层。 首先，我们需要在HTML中定义两个div元素。一个是`#black_overlay`，它作为遮罩层，覆盖整个页面，通常具有半透明黑色背景；另...
CSS网页布局学习之Font-size的妙用
12-12
在CSS网页布局中，`font-size`属性是一个非常重要的元素，它不仅用于设置文本的大小，还能对元素的尺寸和布局产生深远的影响。在本文中，我们将深入探讨`font-size`在网页布局中的妙用，特别是在处理精细尺寸时的...
详解css3 mask遮罩实现一些特效
12-10
CSS3的mask遮罩属性是一种强大的视觉效果工具，它允许开发者通过透明图像或渐变来隐藏或显示元素的背景部分，创造出丰富的动态效果。在本文中，我们将深入探讨CSS3的mask属性及其相关子属性，以及如何利用它们来实现...
css实现兼容火狐、IE的LI奇偶行颜色交替方法
09-24
这篇文章将详细介绍如何使用CSS来实现这一功能，并确保在Firefox和Internet Explorer（IE）等不同浏览器中具有良好的兼容性。 首先，我们需要了解CSS中的`:nth-child`伪类选择器。`:nth-child`允许我们根据元素在父...
让IE兼容background-size的方法_background-size ie下使用
weixin_33763244的博客
08-16 273
ie6，ie7，ie8下对css background-size并不支持，那么如何在ie下兼容background-size呢？在ie下把图片完整的居中显示在一定范围内在css中添加如下代码： filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='图片地址...
解决IE浏览器部分版本不支持background-size属性问题
热门推荐
道阻且长，行则将至
12-02 2万+
background-size是CSS3新增的属性，现在有很多浏览器都支持CSS3了。但是IE浏览器有些版本还是不支持，比如IE8，IE9也有些CSS3的属性会支持，但是有些也不支持。在这里就了解一下CSS3的background-size。 background-size 属性 1、定义： background-size 用来调整背景图像的尺寸大小。以象素或百分比显示，当指定为百分
css3 background-size属性--ie兼容
zerlinda_c的博客
11-24 5660
background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片background-size 属性1、定义：background-size 用来调整背景图像的尺寸大小。 2、语法：以下为引用内容： background-size :
css3的background-size兼容IE低版本
sina1990125的博客
11-12 1847
众所周知。IE浏览器是个特么头疼的家伙，是不是看到它就想当面强奸它的感觉 我也是刚初来咋到，今天写页面的时候用到的css3的background-size属性，其经常出现的值有cover或者用100% 100%； 但到了IE6，7, 8它不兼容。。。所以今天用到IE的filter特有属性来解决找个问题 css代码如下： 在background-size的容器内添加这句代码即可解决IE6，7
IE8兼容background-size属性
一万年太久 - 只争朝夕
03-19 8413
IE8无法兼容CSS3的很多属性和方法比如：background-size等这些比较常用的属性。网上很多人都说用滤镜效果就可以：先看滤镜效果的实现方式：第一：在dom元素rend的时候判断浏览器类别，然后分别加载不同的样式IE样式* .index_wrap_IE { width:100%; height:100%; background:url("http://192.168.1.105:8080...
css3 background-size:cover IE8不支持 解决办法
細水、長流√的专栏
04-12 3992
因为IE8浏览器这个坑，不支持css3的background-size:cover这个属性，当时有一个很大的图片需要做页面的背景，要适应不同分辨率的电脑，然后就遇到了这个问题 IE8虽然不支持这个属性，但是有一个filter​这个属性 个人认为是这样解释：微软Alpha图片加载器​ filter:progid:DXImageTransform.Microsoft.AlphaIma
IE浏览器兼容background-size属性
fangdengfu123的博客
09-12 1273
引入火腿肠文件（.htc）来进行hack，强行让ie8支持background-size属性。简单来说，就是引入js文件来对图片大小进行配置。 使用的htc文件的background-size-polyfill项目git地址：https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.
ie8下background-size不起作用
笑到世界都狼狈的博客
09-06 917
最近做项目，ie8下的background-size不起作用，网上发现有个backgroundsize.min.htc火腿肠文件，下载导入项目css文件中 然后在需要的css样式中导入就可以了，具体上代码： /*兼容ie8下的background-size属性*/ .middle{ -ms-behavior: url(../css/backgroundsize.min.htc);//...
IE兼容background-size
qq_16715661的博客
09-04 136
/针对IE8的hack，目的是除掉之前background/ background: none\9; /下一行为关键设置/ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘img/aaa.jpg’, sizingMethod=‘scale’); 试验后确实管事，但是尽量单独把他另起一个样式写，会影响rem.js的渲染 .top-grid{width:100%;height:1.46rem;background: url("../
我需要一段js兼容ie8的轮播图
最新发布
03-31
以下是一段兼容IE8的简单轮播图代码： HTML代码： ```html <li><img src="image1.jpg" alt="Image 1"> <li><img src="image2.jpg" alt="Image 2"> <li><img src="image3.jpg" alt="Image 3"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值