IE8兼容background-size属性

最新推荐文章于 2024-09-23 11:30:52 发布
最新推荐文章于 2024-09-23 11:30:52 发布
阅读量8.4k 收藏 3
点赞数 1
分类专栏： 毛草屋 文章标签： IE8兼容CSS3 background-size兼容IE8
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/superdog007/article/details/50931943
版权
本文介绍如何使CSS3的background-size属性在IE8中生效，通过使用特定的滤镜技术来实现兼容。针对jQuery版本的限制，提出了一种适用于IE8的背景尺寸兼容解决方案。
摘要由CSDN通过智能技术生成

IE8无法兼容CSS3的很多属性和方法比如：background-size等这些比较常用的属性。

网上很多人都说用滤镜效果就可以：

先看滤镜效果的实现方式：

第一：在dom元素rend的时候判断浏览器类别，然后分别加载不同的样式

IE样式

 
* .index_wrap_IE { width:100%; height:100%; background:url("http://192.168.1.105:8080/xxx/static/images/index/index_bg_1.jpg") no-repeat center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://192.168.1.105:8080/xxx/static/images/index/index_bg_1.jpg',  sizingMethod='scale'); }

其他浏览器样式&
了解本专栏 订阅专栏 解锁全文 超级会员免费看
CSS3之背景尺寸Background-size使用介绍
09-25
- background-size属性在主流浏览器中都得到支持，包括Chrome、Firefox、Safari、Opera和IE9及以上版本。 - 兼容性前缀对于早期支持需要特别注意，如： - -moz-：针对早期版本的Firefox浏览器。 - -webkit-：...
解决XP IE8不支持css3的background-size问题实例
04-06
本实例主要关注的是如何解决在Windows XP系统下，使用Internet Explorer 8（IE8）浏览器时遇到的不支持CSS3 `background-size`属性的问题。这个问题是由于IE8浏览器的内核不支持CSS3新特性导致的，而`background-...
IE8兼容background-size
xiaoouh的博客
02-18 4310
因为background-size是CSS3的属性，所以IE8并不支持。 可以采用滤镜来支持，即 在IE不支持这个属性的时候可以通过滤镜来实现这样的一个效果。 代码如下： strong>background-image: url('file:///F:/test/images/flashbg.jpg'); background-size: cover; filter
【CSS】background-size 属性详解
最新发布
lph159的博客
09-23 3114
属性允许你定义背景图片的大小，以适应元素的尺寸和页面布局。该属性能够通过多种方式设定背景图像的缩放比例，提供了从完全覆盖到按比例缩放的多种方案。auto：默认值，保持背景图片的原始大小。cover：背景图片将被缩放到足够大，以完全覆盖元素的背景区域，即使图片会被裁剪。contain：背景图片将被缩放到足够小，以完整显示在元素背景中，且不会被裁剪。指定尺寸：你可以直接设定背景图片的宽度和高度，如或50% 50%，甚至还支持calc()函数进行动态计算。属性为开发者提供了强大的背景图像控制能力。
IE8下实现兼容rgba
weixin_34121304的博客
01-14 162
昨天遇到一个问题，要实现一个背景透明的效果，用CSS3用rgba()就能实现，即 background: rgba(0,0,0,.5); 但是要兼容到IE8，就发现没有透明效果，因为IE8不支持rgba()函数。下面我们总结一下rgba()函数的含义。 rgba的含义，r代表red，g代表green，b代表blue，a代表透明度。红绿蓝...
IE8兼容background-size方法
weixin_41612533的博客
08-08 326
大家都知道background-size这个属性并不兼容ie8，如果解决这个问题呢？网络上通常会用ie的滤镜来解决这个方法，具体的代码如下： filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/logo.png', sizingMethod='scale'); 然后发现logo变得十分华丽（奥义·双重l...
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 是一个很有用的属性，用于定义背景图片的尺寸，有了这个属性，你就可以任意指定背景图片的大小。其中最常用的值应该要...
css3中背景尺寸background-size详解
09-25
在编写样式表时，可以通过JavaScript直接操作DOM元素的style属性来动态设置background-size，例如：document.getElementById('element').style.backgroundSize = '100px 200px';。这允许开发者在页面运行时根据用户...
IE8支持background-size
勿忘初心
01-12 345
下载backgroundsize.min.htc放到文件夹里，原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。 然后在样式中只需要这么写上几句就可以了。.main { background: url(images/1.jpg) no-repeat; background-size: cover;
background-size兼容ie7/8
u013185395的博客
11-30 1495
引用附件文件，然后css添加如下代码 css: background: url(images/126.jpg) center no-repeat; background-size: cover; -ms-behavior: url(css/backgroundsize.min.htc); behavior: url(css/backgroundsize.min.htc);
【ie兼容】ie8兼容background-size属性
wjx_jasin的博客
01-29 417
测试兼容性的时候发现Logo图片在IE8下特别大。明显是background-size在ie8一下不兼容。 因此我们引用另外一种方法，引入文件（.htc）来进行hack，强行让ie8支持background-size属性。简单来说，就是引入js文件来对图片大小进行配置。 　　使用的htc文件的background-size-polyfill项目git地址：https://github.com/...
[转载]css3的一个控制背景的属性，background-size可以缩放大小啦
weixin_30699443的博客
07-15 498
background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同。 html: ...
IE8及以下 支持CSS3 background-size 方法
菜虚鲲的博客
11-20 293
IE8及一下 支持CSS3 background-size 方法 html demo <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { heigh...
ie8 css占满剩余空间,让IE7 IE8支持CSS3 background-size属性
weixin_30253941的博客
08-04 419
简介CSS3 新增的 background-size 是一个很有用的属性，用于定义背景图片的尺寸，有了这个属性，你就可以任意指定背景图片的大小。其中最常用的值应该要数 cover 了，该值能让背景图片缩放至填满整个容器，即使是图片面积小于容器面积。由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 backgrou...
CSS3 新属性篇(五)：background-size属性
madman0621的博客
10-03 2万+
目录： background-size属性介绍 演示代码 background-size属性分析 设置固定尺寸的背景图片 背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放 背景图片扩展并覆盖填充满整个所属元素区域 背景图片尺寸宽度和高度完全适应内容区域 一、background-size属性介绍 CSS3 的 background-size 属性能调整背景图片的大小，从而替代了用...
background-size属性详解
热门推荐
少油少盐不要辣
06-05 11万+
css background-size 属性详解，background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin（图片的起始位置） 的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。 background-size 属性 1、定义： background-size 用来调整背景图像...
IE8兼容background-size:cover
08-18 624
方法1：background-image: url('file:///F:/test/images/flashbg.jpg'); background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',sizingMeth
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值