backgroundsize 兼容

2024-10-02

CSS3 background-size属性兼容

background-size是CSS3新增的属性,但是IE8以下还是不支持 background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比):background-size :cover; // 扩展图片来填满元素(保持像素的长宽比):background-size :100px 100px; // 调整图片到指定大小: background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元素的尺寸. 浏览器兼容: IE 和遨游不

CSS3水平翻转样式和background-size兼容问题

一.水平翻转和垂直翻转:第一种:随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } /*垂直翻转*/ .flipy { -moz

背景图片background-size兼容ie8以下浏览器解决

背景图片不够大,然后就想到用background-size:100%; 测试浏览器的时候发现ie8以下不兼容,图片会自动填充平铺过去,然后出现背景不好看的现象.解决方法: background-image: url(images/background.jpg); background-size:%;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg',sizingMethod=

解决ie 低版本的 background-size 兼容问题

在IE不支持这个属性的时候可以通过滤镜来实现这样的一个效果. div{background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='登陆_files/ban.jpg', sizingMethod='scale');} 这样就可以让IE也实现background-size:100%100%的效果了,注意这两个路径要一样,并且是绝对路径.

css兼容写法

css3 1.box-shadow: filter:progid:DXImageTransform.Microsoft.Shadow(color=#,direction=,strength=);/*兼容ie*/ -moz-box-shadow: 2px 2px 10px #;/*兼容firefox*/ -webkit-box-shadow: 2px 2px 10px #;/*兼容safari或chrome*/ box-shadow:2px 2px 10px #;/*兼容opera或ie9*/ 2

css--技巧整理（1-13）

(更新中) 1.取消浏览器form中默认样式 a.chrome下input和textarea的聚焦边框 input,button,select,textarea{outline:none} b.取消chrome下textarea可拖动放大 textarea{resize:none} c.解决chrome下input,textarea自动填充后有黄色背景 input:-webkit-autofill , textarea:-webkit-autofill , select:-webkit-aut

整理前端css/js/jq常见问题及解决方法（2）

移动端手机 1.点击图片或按钮,选中状态影响到其他范围解决:html{-webkit-user-select:none}<meta name="msapplication-tap-highlight" content="no" /> 2.禁止长按 a,img 标签长按出现菜单栏a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/} 3.去掉 a,input 在移动端浏览器中的默认样式(半透明灰色

ie8兼容background-size属性

满心欢喜地写代码,最后测试兼容性的时候发现Logo图片在IE8下特别大.明显是background-size在ie8一下不兼容. 我懂得,IE8还是个孩子,我就加几句你独有的代码让你兼容吧,司空见惯了: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/logo.png', sizingMethod='scale'); 然后发现logo变得十分华丽(奥义·双重logo): 明显是ie8两种backgroun

IE 兼容background-size

1:修改src *background-size: cover;//兼容ie的background-size filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/css/i/user-selected-bg.png', sizingMethod='scale');//兼容ie的background-size

background-size： contain 与cover的区别，以及ie78的兼容写法

一:background-size: contain 与cover的区别: 作用: 都是将图片以**相同宽高比**缩放以适应整个容器的宽高. 不同之处在于: 1. 在no-repeat情况下,如果容器宽高比与图片宽高比不同, cover:图片宽高比不变.铺满整个容器的宽高,而图片多出的部分则会被截掉: contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域: PS:其实,从英文的意思来说:cover意味着“遮罩.遮盖”---此处理解为“塞满”较恰当,conta

background-size在IE8不兼容问题

background-size在IE8及以下浏览器不兼容:要解决的话要用滤镜: filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='', sizingMethod='scale'); 注意:此处src的路径必须是绝对路径,相对路径不可以! 当写完这些后会发现又出现个新问题:页面中的背景是双重的,查看元素发现,background和滤镜同时都起了作用,于是出现了双背景.background属性与filter不可以在一起

IE浏览器兼容background-size

background-size是CSS3新增的属性,IE8以下不支持,通过滤镜实现background-size效果 background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比):background-size :cover; // 扩展图片来填满元素(保持像素的长宽比):background-size :100px 100px; // 调整图片到指定大小: background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元

css3 background-size属性--ie兼容

css3 background-size属性--ie兼容 safari浏览器对background-size 属性显示原始大小 background-size: cover not working on iOS Ask Question This caused me a number of problems as well. The problem is that iOS is using the full height & width of the body instead of the vi

解决IE8不兼容 background-size

IE8下,使用background-size适应盒子大小时不兼容,效果如下图: 网上找资料,说添加如下代码可以兼容IE8 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Style Library/hry/images/logo.png',sizingMethod='scale'); 于是加上后,得到如下图可以发现,确实有自适应了,但是却有2张了,于是想到hack,使用 \9 filter: progid:DXI

让IE兼容background-size的方法_background-size ie下使用

ie6,ie7,ie8下对css background-size并不支持,那么如何在ie下兼容background-size呢?在ie下把图片完整的居中显示在一定范围内在css中添加如下代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='图片地址.jpg', sizingMethod='scale'); 下面给出完整的实例代码: <!DOCTYPE html> <html> <head>

css background-size 属性兼容ie8 ie7 方案

<PUBLIC:COMPONENT lightWeight="true"> <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="o.init()" /> <PUBLIC:ATTACH EVEN

background-size IE8兼容方案

根据canius(http://caniuse.com/#search=background-size),background-size兼容性为IE9以及以上浏览器,如下图所示. 实例代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>background-size 兼容性处理</title> &

兼容ie的background-size: cover;

.bg{ background: url() no-repeat; background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../image/bg.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../image/bg.jpg',

IE8兼容background-size

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/web/images/bg.png',sizingMethod='scale');

ie8中遇到的兼容问题以及解决方案

一.CSS3 1.可以通过在css中引入pie.htc,处理兼容问题(可处理的属性) -webkit-box-shadow: 0 1px 5px #ff2826; -webkit-border-radius: 4px;等最后在该样式中引入pie.htc 例子:.index-tab li a:hover{ box-shadow: 0 5px 20px #aeaeae; -webkit-box-shadow: 0 5px 20px #aeaeae; behavior: url(PIE.htc);

backgroundsize 兼容

热门专题