圆角之图片实现方法小结二

尼玛,昨天又被IE6坑了一个下午。哎,IE6你虐我千百遍,我却待你如初恋。做个网页不容易,每次其他浏览器显示正常,一到IE6测试的时候,不说了,都是泪。

不过没有过不去的坎,继续用我坚韧的毅力来克服它。嘿嘿,废话一大堆了,直入正题……

昨天总结的四张图片实现圆角经IE6测试的时候发现绝对定位bottom:0;的时候问题,如图:

看到bottom:0;无法覆盖最下面的底边了。

原因分析:在IE6中子框在父框内适用绝对定位时候Bottom:0,会发生子框内背景图片无法到底,如图:

解决方法:将原来图片放在DIV里面绝对定位改为直接对图片进行绝对定位,不使用DIV。

<body>
    <div class="container">
    <div class="content">
        中国人,最强大脑!
        中国人,最强大脑!
        中国人,最强大脑!
        中国人,最强大脑!
        中国人,最强大脑!
        中国人,最强大脑!
        中国人,最强大脑!
        <img src="r_top.gif" alt="r_top" class="r_top">           //原来这里都是将图片作为DIV的背景,然后对DIV进行绝对定位,现在直接用图片来绝对定位就可以解决。
        <img src="l_top.gif" alt="l_top" class="l_top">
        <img src="l_bottom.gif" alt="l_bottom" class="l_bottom">
        <img src="r_bottom.gif" alt="r_bottom" class="r_bottom">
            </div>
    </div>
</body>
</html>

四张图片实现圆角最佳方法为:直接对四张图片进行绝对定位,不使用子框加载背景图片绝对定位。

时间: 2024-11-05 21:29:25

圆角之图片实现方法小结二的相关文章

圆角之图片实现方法小结

这几天一直在捣鼓图片实现圆角的方法.捣鼓了两天,累的脑都缺氧了.终于功夫不负有心人,在我一直不断尝试和修改下最终成功完成了图片实现圆角效果. 好了,废话不多说,直接如题. 这里先总结下,图片实现圆角效果我分为两种: 一.上下两张图,中间自适应高度 实现原理:利用切割圆角图片为上下两张,中间利用border-left(right):1px solid black,高度不写(高度自适应). 具体步骤:1:建立三个top,mid,bottom 2: 在top,bottom分别加入圆角背景图片. 3:在

javascript_String方法小结(二)(字符串函数扩充)

/* =========================================== //去除左边的空格 =========================================== */ String.prototype.LTrim = function() { return this.replace(/(^\s*)/g, ""); } /* =========================================== //去除右边的空格 ========

JAVA中生成二维码图片的方法

JAVA中生成二维码的方法并不复杂,使用google的zxing包就可以实现.下面的方法包含了生成二维码.在中间附加logo.添加文字功能. 一.下载zxing的架包,并导入项目中,如下: 最主要的包都在com.google.zxing.core下.如果是maven项目,maven依赖如下: 1 <dependency> 2 <groupId>com.google.zxing</groupId> 3 <artifactId>core</artifact

Android 圆形/圆角图片的方法

Android 圆形/圆角图片的方法 目前网上有很多圆角图片的实例,Github上也有一些成熟的项目.之前做项目,为了稳定高效都是选用Github上的项目直接用.但这种结束也是Android开发必备技能 ,所以今天就来简单研究一下该技术,分享给大家. 预备知识: Xfermode介绍: 下面是Android ApiDemo里的"Xfermodes"实例,效果图. Xfermode有三个子类,结构如下: view sourceprint? 1.public class 2.Xfermod

[Android] 给图像添加相框、圆形圆角显示图片、图像合成知识

    前一篇文章讲述了Android触屏setOnTouchListener实现突破缩放.移动.绘制和添加水印,继续我的"随手拍"项目完成给图片添加相框.圆形圆角显示图片和图像合成的功能介绍.希望文章对大家有所帮助. 一. 打开图片和显示assets文件中图片 首先,对XML中activity_main.xml进行布局,通过使用RelativeLayout相对布局完成(XML代码后面附).然后,在Mainctivity.java中public class MainActivity e

[Android] 给图像加入相框、圆形圆角显示图片、图像合成知识

    前一篇文章讲述了Android触屏setOnTouchListener实现突破缩放.移动.绘制和加入水印,继续我的"随手拍"项目完毕给图片加入相框.圆形圆角显示图片和图像合成的功能介绍.希望文章对大家有所帮助. 一. 打开图片和显示assets文件里图片 首先,对XML中activity_main.xml进行布局,通过使用RelativeLayout相对布局完毕(XML代码后面附).然后,在Mainctivity.java中public class MainActivity e

Linux将服务设置为开机自启动的方法小结

Linux设置为开机自启动的几种方法小结 和Windows一样,Linux也可以将一些服务设置为开机自启动,这样可以避免每次开机都会去打开某一个服带来的麻烦!Linux开机将服务设置为开机自启动的方法大概有一下几种: 一.ntsysv图形界面设置 ntsysv -> NeWT + SysV ,它是使用 newt 库的 SysV 风格的 runlevel 配置工具,Red Hat公司遵循GPL规则所开发的程序,它具有互动式操作界面,您可以轻易地利用方向键和空格键等,开启,关闭操作系统在每个执行等级

谈谈Ext JS的组件——布局的使用方法续二

绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为输入控件的 高度基本是固定的,所以不需要设置.在可视化编程没有出现之前,开发界面算是个苦差事,因为布局是需要花费不少功夫的,例如想要在已经定义好的组件中插入 一个组件,那就得重新修改插入位置以下的组件的坐标,这工作是比较枯燥无聊的,因而,在没必要的情况下,还是少选择这种布局模式. 绝对布局是使用CS

android图片处理方法(不断收集中)

//压缩图片大小 public static Bitmap compressImage(Bitmap image) { ByteArrayOutputStream baos = new ByteArrayOutputStream(); image.compress(Bitmap.CompressFormat.JPEG, 100, baos);//质量压缩方法,这里100表示不压缩,把压缩后的数据存放到baos中 int options = 100; while ( baos.toByteArra