前端学习 -- Html&Css -- ie6 png 背景问题

在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示
解决方法:
1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以后,图片的清晰图会有所下降;
2.使用JavaScript来解决该问题,需要向页面中引入一个外部的JavaScript文件,然后在写一下简单的JS代码,来处理该问题。

DD_belatedPNG_0.0.8a.js : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js

DD_belatedPNG_0.0.8a-min.js:http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js

用上面这两个来处理png透明效果无法正常显示问题

使用:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            .box1{
                width: 200px;
                height: 200px;
                background-image: url(img/3.png);
                background-repeat: no-repeat;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-image: url(img/4.png);
                background-repeat: no-repeat;
            }

        </style>
    </head>
    <body style="background-color: #bfa;">
        <div class="box1"></div>
        <div class="box2"></div>
        <img src="img/3.png"/>

        <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
        <script type="text/javascript">
            DD_belatedPNG.fix("*");
        </script>
    </body>
</html>

效果:

github地址:https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/BelatedPNG.html

时间: 2024-10-18 08:53:29

前端学习 -- Html&Css -- ie6 png 背景问题的相关文章

前端学习(9)~css学习(三):样式表和选择器

本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css

前端学习 -- Html&amp;Css -- 条件Hack 和属性Hack

条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keywords> if条件共包含6种选择方式:是否.大于.大于或等于.小于.小于或等于.非指定版本 是否: 指定是否IE或IE某个版本.关键字:空 大于: 选择大于指定版本的IE版本.关键字:gt(greater than) 大于或等于: 选择大于或等于指定版本的IE版本.关键字:gte(greater th

前端学习 -- Html&amp;Css -- 层级和透明度

层级 如果定位元素的层级是一样,则下边的元素会盖住上边的. 通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示. 对于没有开启定位的元素不能使用z-index. 透明度 设置元素的透明背景opacity可以用来设置元素背景的透明,它需要一个0-1之间的值: 0 表示完全透明 1 表示完全不透明 0.5 表示半透明 opacity属性在IE8及以下的浏览器中不支持,IE8及以下的浏览器需要使用如下属性代替:alp

2016/12/10前端学习笔记CSS结束+JS开始。

18 浏览器兼容问题:IE6不支持小于12px的盒子,兼容方式: height:4px; _font-size:1px; IE6不支持overflow:hidden的方法清除浮动,所以,需要 用 : overflow: hidden; 与_zoom:1;两条代码做兼容处理 css属性之前加上下划线是IE6的专有属性 例如:_background-color:red; 19 margin的塌陷:在标准文档流中竖直方向的margin会有已较大margin 为准的塌陷现象.但是浮动后没有塌陷. 20

前端学习随笔 css篇

CSS css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style = 'key1:value1;key2:value2;' 在标签中使用 style='xx:xxx;' 在页面中嵌入 < style type="text/css"> </style > 块 引入外部css文件 标签选择器 div{ background-color:

前端学习html css js

html 第一章 :HTML模板 HTML是什么(超文本标记语言) HTML网页主体结构 doctype标签 head标签 meat标签 title标签 body标签 第二章:HTML标题 h1标题标签 h2标题标签 h3标题标签 h4标题标签 h5标题标签 h6标题标签 hr水平线标签 第三章:HTML 段落 p段落标签 br换行标签 第四章:HTML 样式 center定义居中内容 font和basefont定义HTML字体 s和strike定义删除线文本 u定义下划线文本 第五章:HTML

前端学习之CSS(三)

九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: html内容: <div class="box1">第一个div</div> <div class="box2">第二个div</div> <span>一个span</span> css内容: *左浮动*

前端学习(13)~css学习(七):浮动

文本主要内容 标准文档流 标准文档流的特性 行内元素和块级元素 行内元素和块级元素的相互转换 浮动的性质 浮动的清除 浏览器的兼容性问题 浮动中margin相关 关于margin的IE6兼容问题 标准文档流 标准文档流的特性 (1)空白折叠现象: 无论多少个空格.换行.tab,都会折叠为一个空格. (2)高矮不齐,底边对齐: (3)自动换行,一行写不满,换行写. 行内元素和块级元素 学习的初期,我们就要知道,标准文档流等级森严.标签分为两种等级: 行内元素 块级元素 我们可以举一个例子,看看块级

web前端学习笔记(CSS盒子的浮动)

Posted on 2013-09-18 09:00 Stephen_Liu 阅读(2205) 评论(6) 编辑 收藏 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里