首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

关于IE6的PNG图像透明使用AlphaImageLoader的缺点

PNG32的alpha透明效果在IE6下会出现bug,出现灰色背景。而目前的解决方案就是 IE提供的滤镜。需要注意的是滤镜并不是对原图片进行修改,而是对相应的html元素进行 修改。...现总结使用滤镜的缺点:   1,IE6下使用滤镜,那么无法对该PNG图片进行定位。可以通过其他解决方案完成。这篇 文章提到了两种解决方案,分别是硬编码和clip方案。   ...2,使用滤镜会冻结IE6的渐进渲染。渲染往往是从css下载完毕开始进行,然而对于使用滤镜 图片而言,渲染得从该图片下载完成才开始。...当页面有多个图片使用了透明PNG(对于IE6),那么 滤镜的处理是叠加的,得等到所有PNG图片下载完成之后才能开始渲染,在此之前呈现给我们的将是 空白页面。   ...PNG8支持alpha通道,而且PNG8的半透明像素会在IE6下显示为 完全透明。这就提供了向下兼容的方案。在IE7及其以上的浏览器显示alpha透明度,而在IE6下为全透明

82680

html设置背景图透明度代码,css设置图片背景透明

我们经常会使用到背景图片,但有时候需要把背景图片设置一个半透明的效果,那么就需要以下的CSS了。这是一个CSS滤镜达到的效果,应用十分广泛。...,范围在0-100,0表示完全透明,100表示完全不透明。...“finishopacity” 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。...“style” 指定透明区域的形状特征:0 代表统一形状,1 代表线形,2 代表放射状,3 代表矩形 “startx” 渐变透明效果开始处的 X坐标。...“starty” 渐变透明效果开始处的 Y坐标。 “finishx” 渐变透明效果结束处的 X坐标。 “finishy” 渐变透明效果结束处的 Y坐标。

4.4K10

DD_belatedPNG 与 unitpngfix 两种解决 IE6 中 PNG 图片透明问题方案横向对比

虽然 IE6 骂声不断,但是仍然还有不少的市场份额。而在网页中,png 文件体积小、无锯齿、透明度好而被广泛使用。...当这两件事情碰在一起,问题就来了,IE6 不支持 PNG 透明图片,它会把透明的部分显示成白色的。...有问题就会有解决方法,可以使用早期 IE6 支持的滤镜来实现透明效果,有些牛人就根据这个原理进行了封装,做成了 JS 来使用。所以,我们只需要调用他们编写 JS 文件即可。...知更鸟已经写了一篇比较简单的使用方法:使用DD_belatedPNG让IE6支持PNG透明图片 官方的英文版提供了更加详细的教程:点击这里 unitpngfix.js 方法 unitpngfix.js...Demo 页面非常简单,就是一个带有透明 png 背景图片的 div ,并且把背景图片放在了右下角,关键代码: div{width:400px;height:400px;margin:20px;background

37410

css只设置背景图片半透明,css 设置背景色或图片半透明的方法(图文)

css设置背景颜色半透明或者设置背景图片半透明,但有的时候只需要设置最外层的div为半透明里面的内容不需要设置 下面介绍一下这两种情况 1.设置html元素你面内颜色和图片都为半透明状态支持IE浏览器...#000; opacity: 0.5; filter: progid:DXImageTransform.Microsoft.alpha(opacity=50); } 2.设置html元素最外层的颜色为半透明...(startcolorstr=#7F000000,endcolorstr=#7F000000);/*#7F000000的前两位为16进制透明度,后六位为16进制颜色*/ } 下面给出上面两种情况的测试代码...: 设置背景半透明 .bg1{ background:#000; opacity: 0.5; filter: progid:DXImageTransform.Microsoft.alpha(opacity...(startcolorstr=#7F000000,endcolorstr=#7F000000);/*#7F000000的前两位为16进制透明度,后六位为16进制颜色*/ } aafaa sdfsd

2.4K10

【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

一、CSS 背景设置 1、背景颜色 CSS 的背景颜色样式语法 : 默认的背景颜色是 transparent 透明 ; background-color:颜色值; background-color 属性...与 网页内容 绑定 , 网页滚动时 , 背景图像也进行滚动 ; fixed : 背景图像 固定 , 滚动网页时 , 背景图像位置保持不变 ; 7、背景样式简写 使用 CSS 样式设置 盒子 背景时 ,...背景平铺 背景滚动 背景位置 8、背景半透明 背景半透明设置 可以 使用 rgba 颜色值设置半透明背景 ; 下面的 CSS 样式中 , 就是 设置黑色背景 , 透明度为 20% ; background...: rgba(0, 0, 0, 0.2); 颜色的透明度 alpha 取值范围是 0 ~ 1 之间 , 在使用时 , 可以 省略 0.x 前面的 0 , 直接使用 .x 作为透明度值 , 如 : background...: rgba(0, 0, 0, .2); 背景半透明 指的是 盒子的背景设置为半透明 , 可以看到下面的内容 , 盒子里面显示的内容不受背景影响 , 照常显示 ;

23910

HTML+CSS高级

input空隙问题                解决方法:给input加上浮动           1.13     IE6下输入类型表单背景图片--》背景图片会跟着文字的增多移动                ...以及以下支持:_background: red;      3、IE6不支持PNG24 (IE6下不支持透明)           解决办法1:引用js文件处理。    ...但是不支持body上面的背景图片     //这个插件是处理png-24图片在IE6下出现灰色背景的。...input空隙问题                解决方法:给input加上浮动           1.13     IE6下输入类型表单背景图片--》背景图片会跟着文字的增多移动                ...以及以下支持:_background: red;      3、IE6不支持PNG24 (IE6下不支持透明)           解决办法1:引用js文件处理。

5.7K61

对html与body的一些研究与理解

4.关于background的fixed固定定位 Firefox是支持background:fixed定位的,IE6只能说是半支持,好吧,这么说吧,可能不太严谨,就是背景图片固定的效果似乎只在根结点起作用...还是火狐浏览器下,背景图片都是固定的死死的,不错。.../image/404.png) no-repeat fixed center center;} div{height:2000px;} 结果IE6下,背景不固定了,只看到背景图片随着滚动条上下移动而移动...前段时间看到百度的一道面试题,说什么透明层无论滚动与否都满屏显示,其实就是对和标签做一番手脚,两者高度100%显示,同时溢出隐藏(overflow:hidden),然后用一个平级,高宽100%显示,就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。

2K30

第141天:前端开发中浏览器兼容性问题总结(二)

透明png图片会带背景色 问题: 在ie6透明的png图片会带一个背景色 解决: background-image: url(icon_home.png); background-repeat: no-repeat...让层显示在FLASH之上 问题:        想让层的内容显示在flash上 解决: 把FLASH设置透明 1、...,它们不支持滤镜filter,无法实现图片切换中间变换的效果,只能通过透明度来设置。...IE6背景闪烁的问题 问题:        链接、按钮用CSS sprites作为背景,在ie6下会有背景图闪烁的现象。...原因是:IE6没有将背景图缓存,每次触发hover的时候都会重新加载 解决: 可以用JavaScript设置ie6缓存这些图片: document.execCommand("BackgroundImageCache

1.9K21

CSS编码规范

border:none 9.尽量避免使用AlphaImageLoader 10.在保持代码解耦的前提下,尽量合并重复的样式 11.background、font等可以缩写的属性,尽量使用缩写形式 hack IE6...* html selector { … } IE7 *+html selector { … } 非IE6 html>body selector { … } firefox @-moz-document...2、背景图片请合理使用csssprites,按照模块、业务、页面来划分均可 3、css背景图片的文件类型,请按照以下原则来保存: 3.1 如果背景图片有动画,则保存成gif 3.2 如果没有动画,也没有半透明效果...,则保存成png-8 3.3 如果有半透明效果,则保存成png-24 4、不要在html中加入标签来清理浮动,通过在浮动元素的父元素上添加.clearfix来清除浮动 5、为了SEO和页面可用性,请使用...7、避免过小的背景图片平铺。 8、尽量少用!important 9、避免使用非一次性expression

1.4K150
领券