很多时候需要给body添加一个背景图片，同时对北京图片稍微做透明处理，保证背景图片不会影响主体的显示。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>背景图片半透明</title>
<style>
.opacity9 { position:absolute;top:0px;left:0px;margin:0px;padding:0px;width:100%; height:100%;
filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9;z-index:-1; background-color:#ffffff; }
</style>
</head>
<body STYLE="background:url(4312391_110032574158_2.jpg);overflow:hidden;">
<div class="opacity9"></div>
<!--
原理：1 给body添加背景图片，2 添加一个全屏大小或者超大的绝对定位的div(1500 x 1000)并调整大小；3 设置透明度。4 z-index=-1(否则覆盖后边的)<br/>
提示：直接给带有背景图片的DOM添加透明是没用的。
-->
<div style="float:left;margin-left:100px;margin-top:100px;background:url(map1.png) no-repeat;width:300px;height:300px;border:1px solid red;">
<!-- 第二次使用这个样式注意：
1 手动调整宽度和高度，以及left和top
2 设置z-index =0,否则被body的背景覆盖
3 容器内部的div要设置position，同时要设置z-index=1,否则容器内容被当前背景覆盖。
-->
<div class="opacity9" style="left:109px;top:109px;width:300px;height:300px;z-index:0"></div>
<div style="position:relative;z-index:1;margin:0px;padding:0px;">
我的地图：1111111111111
</div>
</div>
<div style="float:left;margin-left:100px;margin-top:100px;background:url(map1.png) no-repeat;width:300px;height:300px;border:1px solid red;">
<!-- 第二次使用这个样式注意：
1 手动调整宽度和高度，以及left和top
2 设置z-index =0,否则被body的背景覆盖
3 容器内部的div要设置position，同时要设置z-index=1,否则容器内容被当前背景覆盖。
-->
<div class="opacity9" style="left:511px;top:109px;width:300px;height:300px;z-index:0"></div>
<div style="position:relative;z-index:1;margin:0px;padding:0px;">
我的地图：12222222222222222222222
</div>
</div>
</body>
</html>
要点是：1 设置position；2调整大小后以及left和top；3给背景图片div和主体div都要设置正确的z-index
重点强调：只有设置了position，z-index才会生效
愤怒的coder - 周六还在干活
- 大小: 292.4 KB
分享到：
相关推荐
图片的背景变透明不是为了酷，而是实际开发工作的需要。在web开发中，经常在网页上添加图片，如果图片的背景与网页的背景不同，会非常难看。如果图片的背景是透明的，那么无论网页的背景是什么，图片的背景是看不到...
易语言PNG图片透明背景源码,PNG图片透明背景,释放字节流,创建字节流,取字节流指针,取字节流尺寸,取出字节集,置窗口PNG外型,Gdiplus_初始化,GdipCreateFromHDC,GdipLoadImageFromFile,GdipLoadImageFromStream,...
Adobe ImageReady CS2制作背景色透明的图片
WPF中使jpg,bmp图片背景透明的方法
那么这篇文章将详细介绍了这几种背景图片的处理方法。 正如前面所说，仅仅依靠CSS现有的属性，我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果，我们需要借助CSS的其他方法来实现...
图片背景透明工具加强版(抠图软件) 支持任意格式的图片，将图片的背景变成透明，可以加强透明程度！
易语言PNG图片透明背景源码.rar
更改图片背景颜色为透明，把图片放入固定路径，运行程序，图片背景将变成透明
由于IE7以下不支持图片的背景的透明.根据IE特性,我们可以用IE的滤镜来实现透明处理 你只要包含下面这个pngfix.js文件就行,如下: <!--[if lt IE 7]> <script defer type="text/javascript" src="/Js/pngfix.js"></...
164个loading图片gif透明背景，适用于所有前端开发。全部为透明背景。样式种类比较多。164个loading图片gif透明背景，适用于所有前端开发。全部为透明背景。样式种类比较多。
易语言PNG图片透明背景源码例程程序结合易语言扩展界面支持库和应用接口支持库，调用API函数实现PNG图片作为窗口的透明背景。点评：本源码是易语言PNG图片的应用实例。 @易语言难学吗。
C#文字转透明背景图片，传人文字信息生成文字透明背景的图片
164个loading图片gif透明背景+gif透明背景loading图片大全
PHP创建透明背景图片：使用imagecreatetruecolor函数创建背景透明的图片。
PNG图片透明背景.rar
c++builder 用png图片做的窗体背景半透明,加入动画效果,放了背景透明的两条鱼在那里游动，不需要用额外的技术，只是直接加入png图片。
MakeTransparent转换透明背景,保存后 背景色变成黑色 2。转化后图片清晰度发生了变化（处理后有黑色像素化点） 3.效率不好。。 ============== 经过几天的模索、找资料、研究 1。保存后背景色不会变黑色（已测，在PS...
背景透明的gif的loading图片，正在加载的gif，loading.gif
div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示 div+css教程A标签属性hover背景图片透明度显示
div设置背景图片透明度且字不透明,div设置背景图片透明度且字不透明