css透明度 css图片透明度设置方法

html-css017

css透明度 css图片透明度设置方法,第1张

在一些网站的登录页面上,经常可以发现,一张图片叠加在另一张图片上,底层的图片若隐若现,利用css中的透明属性opacity可以实现这种效果,下面就简单介绍一下怎么写代码

新建一个HTML文件,下载两张图片,如下图,放在一个文件夹中,避免出现路径问题

代码示例如下,主要利用css伪元素::before,F_box为前置层,浮于背景上方

下面简单分解下代码,分为1,2,3,第一部分,设置背景图片001.jpg;第三部分,固定前置层图片002.jpg的位置;第二部分,利用伪元素::before,设置属性opacity来调节透明度,取值为0-1,0是全透明,即看不见的效果,1是全不透明

代码示例中,设置opacity为0.5,半透明状态,实际页面效果如下

在百度搜索中键入关键词“css模板下载”,然后右键将你喜欢的小图标保存下来,平时浏览网页的时候也注意这些细节问题的;

你给出的两张图片一张是分割线,一张是用来平铺的图片,可以搜集也可以自己做;

背景透明的图片如果要用在百度的话就是将你做的图片去掉背景层保存成gif格式然后上传使用就可以了。

当初遇到这个问题时使用的并不是你提到的JS文件,使用的是一个比较牛B的类似给IE6打补丁一样的JS文件,这个文件你可以在Google代码中找到并下载最新版本。但具体文件名我就不直说了,呵呵,有点舍不得,哈哈,真的。

说一下引用那个JS文件后目测到的效果吧。因为当初没有好好看文档说明,所以根据当初的目测说一下吧。IE6引用之后,原有的CSS盒模型等经典BUG消失,也就是说使IE6从某种程度上来说接近于IE7。其中就包含了支持PNG格式的效果。

当时只是纠结于是否非要用这个JS文件,一方面是增加页面负担,二是对于接近完成的页面,原有针对BUG所写代码白写,会造成一定混乱等等。

所以你可以参考着来

另一方面如果使用一楼说的滤镜,我个人认为速度会有很大影响。

再者,某种程度上根据具体情况,也许你的情况可以用另一种切片方式或者变通的方式可以解决图片的问题。

呵呵,不过话说到这儿,怎么感觉有点乱。

呵呵,再联系吧

关于你对问题的补充

先问你是男是女,如果是女的我就给你文件的下载地址,男的,就不给哦~

算了,不逗你了。

刚给你找了一下http://homepage.ntlworld.com/bobosola/pngfix.js

这个没有使用过,不知道具体应用效果,应该可以。

引用方法:<!--[if lt IE 7.]>

<script defer type="text/javascript" src="pngfix.js"></script>

<![endif]-->

其二就是之前提到的,我用过的。http://code.google.com/p/ie7-js/ 这是介绍及下载。

不过我惊奇的发现,官方说

Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.

呵呵,还真记不清当时怎么回事了。不过也许第一个JS可以实现背景重复,如果实在不行,就是不行了。如果图片不大,你退一步直接用个大图片吧。