鞍山公安局吴刚壮判刑:求救:怎么在网页中插入半透明效果的图片~不要css设置层
那根本看不到下面的背景图片了
我要的效果是在背景图片上面有一个半透明的图片
半透明的图片上还有清晰的字
注意了!
要做透明效果的图片,除了CSS的方法之外。
就是你说得用PS之类的图片处理软件来做了。
但是如果用PS来做,记得保存的格式必须是.gif,因为只有.gif才本身就具备透明效果。.JPG是没有透明效果的。
另外,针对你的效果,CSS其实就很好实现了。
只是要注意方法,不同的方法有不同的效果。
下面我说的方法不会出现你所说的那样——
“css设置层半透明效果搞得上面的字也模糊,再加一个文字层那也太占用空间了,打开慢”
看我做的网页代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>半透明效果图片,背景可见,图片上文字也可见</title>
<style type="text/css">
<!--
body {
background-image: url(images/xiahuaxian.gif);
}
#tupian {
filter: Alpha(Opacity=50, Style=3 );
}
-->
</style>
</head>
<body>
<img src="images/0001.jpg" name="tupian" width="580" height="396" id="tupian">
<div id="Layer1" s="position:absolute; left:133px; top:173px; width:448px; height:33px; z-index:1">图片上的文字图片上的文字图
片上的文字图片上的文字图片上的文字图片上的文字</div>
</body>
</html>
注意图片要有“id="tupian"”的设置,背景图片的设置在body {
background-image: url(images/xiahuaxian.gif);}
这个就是设置那张图片的半透明效果,这样设置的话,不会影响到别的图片的效果。
#tupian {
filter: Alpha(Opacity=50, Style=3 );
}
如果要半透明效果的图片呈现别的形状,改动“Style=3”的值即可,取值范围为0,1,2,3;其中0是最普遍的,即统一格式。
附带说一句,文字层其实不占空间,你看我的文字层才这么一段——
<div id="Layer1" s="position:absolute; left:133px; top:173px; width:448px; height:33px; z-index:1">图片上的文字图片上的文字图
片上的文字图片上的文字图片上的文字图片上的文字</div>
做网页时,倒是表格得注意,网页中的表格要整个下载完(即<table>和</table>之间)才能显示,所以网页中要少用表格。否则显得打开很慢。
很简单哪,在ps里,将图片透明度调为50%,然后打上字.另存为jpg或gif格式,不就OK了.
#28 /?????