当前位置:首页 > 开发 > Web前端 > 前端 > 正文

背景图片的透明方法

发表于: 2012-11-24   作者:accpxudajian   来源:转载   浏览次数:
摘要: 很多时候需要给body添加一个背景图片,同时对北京图片稍微做透明处理,保证背景图片不会影响主体的显示。         <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&q

很多时候需要给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 - 周六还在干活

 

 

背景图片的透明方法

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
说明: 涉及到的类:BufferedImage,Graphics2D,ImageIO 不多说,很简单,运行例子,查看注释 pack
第二章、透明圆角化背景图片 在上面的案例中,我只给出最为原始的圆角框模型,它还是存在一些不足之
程序使用java语言编写,工作原理是取图片边缘的像素点作为要替换的背景色,然后将所有像素点与该颜
CSS中背景图片的定位,困扰我很久了。今天总算搞懂了,一定要记下来。 在CSS中,背景图片的定位方法
一、访问图片去底工具BgRemover在线版 ,点击“浏览”按钮。 二、选择需要去底的图片。 三、BgRemov
在CSS中,背景图片的定位方位有3种: 1)关键字:background-position: top right; 2)像素:backgr
// http://www.3lian.com/edu/2014/06-18/149890.html 今天想把图片背景做成透明效果,以前叫美工的
RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的: 1 2 3 div { background: rgb
同样在移植的过程中,发现 .Net compact Framework 不支持透明图像。原本具有透明属性的Png (含有 a
今天通宵赶出来的效果,先看效果图: 说说实现原理,当给代码没意思。 整个Activity是RelativeLayou
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号