导航:首页 > 万维百科 > 透明网页页面设计

透明网页页面设计

发布时间:2021-02-15 20:13:23

1、网页制作css透明样式

<html>
<head>
<style type="text/css">
<!--
.css_0{
……
}

.css_1{
……
}

-->
</style>
<script type="text/javascript">
function alpha(style,target){
target.className=style;
}

</script>
</head>
<body>
<table onmouseover="alpha('css_0',this)" onmouseout="alpha('css_1',this)" class="css_1">
.........
</table>
</body>
</html>

===============================
"alpha"是自定义的函数名。"css_1"和"css_0"是有透明效果和没有透明效果的两个样式名。

style和target是函数中自定义的变量,作用是接受传递过来的值。不需要更改。
/////////////////////////
style对应的就是“css_0”或“css_1”
target对应的就是“this”在页面中也就是<table>标签
关于this可以上网查一下对它的解释。
JS可以添加在页面任何位置,添加在<head>标签里是最常用的写法。

还可以这么写,不需要写JS,只要写这一段代码就行:
<table onmouseover="javascript:this.className='css_0';" onmouseout="javascript:this.className='css_1';" >
……
</table>

呵呵,不知道是不是你想要的效果……祝你成功!

2、如何设置网页 DIV 的透明

设置DIV半透明CSS代码:copydiv{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}
说明:
1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认
2、-moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50%
3、opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明

3、像这种风格的网页(只做背景和透明的框框)是怎么做的?

这只是HTML+CSS+js的网页,完全可以不用PHP的;

登录功能只是将邮箱,密码和是否24小时内记住我的数据传到后台处理;

注册就是一个链接,点击跳转到注册页面。

4、网页设计中如何设置图像透明色?

告诉你了给个分吧

5、如何制作半透明网页?

朋友。你问的是设计图怎么实现,还是设计之后CSS或JS怎么实现?
如果是设计图时。调整图层透明即可。。
如果是CSS问题,给除body之外的标签的样式加上 filter:alpha(opacity=50);
以上的50的值是自己改的,0至100的alpha值。

6、这样的网页透明效果是怎么做出来的!

应该是用CSS的filter(滤镜效果)~

第一种:加入带有颜色的遮罩一样的半透明效果。
源代码为:
<STYLE type=text/css>
.bodyBg {background:#transparent;filter:progid:DXImageTransform.Microsoft.gradient(GradientType ='1',enabled='true',startColorstr=#AAFFFFFF, endColorstr=#AAFFFFFF);}
</STYLE>
代码中:startColorstr=#AAFFFFFF 前面的AA是透明度,修改成FF是不透明,00是全透明,后面的 FFFFFF 是颜色,就是说在上面蒙什么颜色的东西,正常使用这个效果startColorstr=#AAFFFFFF和 endColorstr=#AAFFFFFF 后面的=#AAFFFFFF数值要一样!

2.简易透明效果。
将上面的渲染方式改为:filter:alpha(opacity=80),80是透明值,100为不透明,0为全透明。

3.其实CSS还有很多其他的渲染方式~付上其他的一些渲染代码。
黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2

希望你能把自己的博客做得与众不同~

7、如何做半透明网页设计才会显得高大上

朋友。你问的是来设计源图怎么实现,还是设计之后CSS或JS怎么实现?
如果是设计图时。调整图层透明即可。。
如果是CSS问题,给除body之外的标签的样式加上 filter:alpha(opacity=50);
以上的50的值是自己改的,0至100的alpha值。

8、图示的网页透明效果,是怎样实现的?

第一种:加入带有颜色的遮罩一样的半透明效果。
源代码为:
<STYLE type=text/css>
.bodyBg {background:#transparent;filter:progid:DXImageTransform.Microsoft.gradient(GradientType ='1',enabled='true',startColorstr=#AAFFFFFF, endColorstr=#AAFFFFFF);}
</STYLE>
代码中:startColorstr=#AAFFFFFF 前面的AA是透明度,修改成FF是不透明,00是全透明,后面的 FFFFFF 是颜色,就是说在上面蒙什么颜色的东西,正常使用这个效果startColorstr=#AAFFFFFF和 endColorstr=#AAFFFFFF 后面的=#AAFFFFFF数值要一样!

2.简易透明效果。
将上面的渲染方式改为:filter:alpha(opacity=80),80是透明值,100为不透明,0为全透明。

3.其实CSS还有很多其他的渲染方式~付上其他的一些渲染代码。
黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2

9、如何设置网页 DIV 的透明?

在DIV的样式里面添加上下面的样式:
filter:alpha(opacity=60); //60就是60%的透明度
opacity:0.6; //0.6也是60%的透明度意思

这2个都要写上内去,不然在不容同浏览器下会有兼容性问题。

10、怎样把网页的背景图像设置得透明一点啊?

用dreamweaver设计啊,这个工具的前台美化功能本来就很强大,不必要用到PS.下面是处理图像的步骤:
1、先在DW设计页面中插入你要处理的图像,记住是插入图像,不要在页面属性那添加背景,现在还没到添加背景那一步;
2、选中图像,在下面属性栏里你就会看到一组可以编辑图像的工具;
3、选择第5个“亮度和对比度”工具,打开之后将亮度调高,将对比度调低就OK的了,要透明的程度你自己把握就行;
4、这一点是需要特别注意的:你调整好图片按保存之后,那么这张图像将不可以再恢复原样,如果你还想保留原图,你可以在调整之前复制一份出来;
5、图像已经处理完毕,将插入的这张图像删掉,再在“页面属性”那添加背景即可。

与透明网页页面设计相关的知识