网页设计半透明_图示的网页透明效果是怎样实现的

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

使用半透明元素来设计网页很美观也很需要技巧。半透明效果是指色块、文字或图片被“稀释”或者冲淡，使得颜色减淡，并且透出后方内容执行到位的话，这种效果会非常震撼，能划出一块绝佳的文字展示区域，或者作为吸引注意力至图像某部分的手段但是使用半透明时，设计师必须小心谨慎。这种效果很难处理得当，因为事关可读性。透明度使用错误的半透明块和文字也，会能散注意力，并且破坏整体设计效果接下来看一套行为准则，附带一些半透明效果在网站上的优秀执行案例通过半透明来形成对比选用半透明设计技巧的最大好处，是创造对比。这种效果可以让设计师通过色块、图片上的大字体或多种颜色层次来创造视觉焦点半透明也可以在背景图不能很好展现上方文字时，将文字分离开来使用半透明设计时尤其需要考虑对比。只有图片(或背景)和文字都可读时，半透明效果才是有意义的。当你考虑使用半透明效果时，问问自己：这是否有助于用户对图文的理解? 避免遮挡图片的重要部分半透明效果不应该遮挡其下方背景或图片的重要部分。决定半透明层位置的时候，要清楚你“牺牲”了什么内容用不同的透明度没有完美的透明度值。对于某些项目，80%透明度比较理想;对于其他的也许15%才是最佳选择。对每个项目采用不同的透明度不要觉得半透明就能让文字更易读使用半透明色块来衬托文字并不意味着文字会自动变得易读。要考虑对比——半透明色块与文字、背景图与半透明色块两方面都要考虑半透明效果用在图片、色块或文字上时，考虑文字的可读性至关重要。切记，如果设计效果致使文字难以辨认，你的信息将无从传达在细节处使用半透明效果半透明并非只适用于网站的主体部分。这种效果在细节处也能大放异彩可以考虑用半透明来展示导航工具栏，或者作为按钮和可点击元素的鼠标悬停效果。多种透明度不要使用过度。选定一种元素和透明度样式，然后使它贯穿整个网站的设计不要在对比强烈的图片上放置半透明元素处于可读性考虑，最好避免在已经包含强烈对比的元素上使用半透明效果——比如黑白对比或色盘上的互补色因为要在背景的各个部分都达到正确的效果很难，想在这类元素上使用半透明效果，除非强烈对比在你的设计中真的只起到负面作用。考虑用浅色块代替吧将半透明作为一种艺术手法半透明不只是次要效果。可以考虑用这个效果为你的网站设计主画面大尺寸半透明创造的对比、强调和视觉吸引令人震撼不要将半透明作为装饰物使用半透明效果并非为了打破设计中的单调。把这种效果作为装饰物使用，注定会导致糟糕的设计半透明效果的使用应该事先考虑和规划好。半透明不是加粗这类简单效果，处理不当看起来会很草率且不专业在背景中使用半透明不只是设计前景元素时可用半透明效果，它也能用在背景图上。有些非常棒的半透明元素精细微妙还有些半透明效果夹在图像层之间。例如Tony Chester的网站，就用了绝妙的半透明分层技巧打造了一件多维度的设计不要同时运用过多半透明效果在每个项目中有节制地使用不同类型的半透明效果。透明度要能制造反差对比，产生视觉吸引力。这样使用过多的差异化效果，会分散用户注意力在轮播图片上使用半透明元素半透明的使用不限于单页网站或静止网站。它在变化的图片和背景上也起作用。两种方式都可以用上半透明效果在轮播图片上使用半透明，是该效果最棘手的用法之一。却也最令人印象深刻。慎重考虑多张背景图的情况。选用颜色和对比搭配相近的图片，这样只需一种半透明效果即可应对后方移动变换的背景格外注意半透明效果与每张图的匹配程度，才能保证每张图的整体性，并创作出易辨认的照片或其他背景与文字，保持视觉统一小结尝试半透明效果，是拓展设计技巧的一个绝妙方法。像很多其他效果一样，要有节制地使用这个技巧，并且在多种环境下实验这种设计，来确保它按你的意图运作和展现半透明设计的最大挑战，是在轮播图片上使用时确保文字清晰可读，和避免半透明元素错误地遮挡下方图片尝试多种透明度和使用方式——用于图片、背景、遮罩效果——来决定那种效果最适合某个项目

2、如何制作半透明图片？

Microsoft
Office
工具里有，我常用word文档有一个更改透明度，在图片属性里
就比如这样。回先打开word文档，在绘答图工具里使用矩形，然后定一下大小，再往里面填充。“设置自选图形格式”，把颜色换成填充效果（第四个是图片）。选好后下面一条就是调整透明度，把条码往右拉就行了，最后就是楼主想办法把完成的图片弄到画图里（画纸小一点），可以在完成时按截屏键“Print
Screen/SysRq”（F12右边），在画图工具里粘贴，在把图片截掉新建一个，再粘贴（画纸需和图片一样大），另存为，就好啦！最好是JPEG图像。希望采纳！(*^__^*)

3、网页设计中如何使颜色呈半透明状态

CSS代码
.test{
background:#000;
color:white;
width:200px;
position:absolute;
left:10px;
top:10px;
filter: Alpha(opacity=10);
-moz-opacity:.1;
opacity:0.1;
}

4、Dreamweaver制作网页鼠标经过图像出现文字还是背景半透明的，怎么做？

首先设置一个div对象，用CSS样式设置img为背景图片，同时设置隐藏标签，然后在锚文本写下显示的文字，设置背景样式为半透明filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}，最后设置鼠标经过图片的时候才会显示文字内容。

所写代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标放图片上时出现文字</title>
<style>
.fm{ position:relative;width:150px; height:150px;margin:0 auto} /*设置div的相对定位，宽高居中*/
.fm span,a{display:none;text-decoration:none;}/*隐藏文字,去掉下划线样式*/
.fm:hover a.mm{ position:absolute; top:0; width:100%; height:100%;
z-index:100; left:0; display:block;}/*设置绝对定位*/
.fm:hover span{ display:block;position:absolute; bottom:0; left:0;color:#CCCCCC;width:150px;z-index:10;height:25px; line-height:25px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}
/* 设置显示文字定位位置，标签宽度与对象宽度相同，设置一定高度，设置css背景为半透明背景颜色。 */
</style>
</head>
<body>
<div class="fm" style="background:url(123/2.png)">
<span>我是一只开心的肥猫</span>
<a href="#" class="mm"> </a>
</div>
</div>
</body>
</html>

浏览效果图为：

以上就是用Dreamweaver制作出鼠标经过图像出现文，背景半透明的效果。

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

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

6、图示的网页透明效果，是怎样实现的？

第一种：加入带有颜色的遮罩一样的半透明效果。
源代码为:
<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、关于网页设计里面图片透明的问题？

在ie8中或比较新的浏览器重是自动透明的，
在ie6或大多数普通浏览器中是不透明的，所以给你个方法http://www.lanrentuku.com/js/css-713.html

8、本人是外行不懂网页设计，请问大神如何用css设置浏览器半透明？求详细步骤。

浏览器是不能设置半透明的，除非浏览器厂商提供了半透明选项，像迅雷版7一样可以设置权半透明背景，不知道你所说的是不是网页半透明，那就在CSS里给你想实现半透明的添加样式
opacity:.5;
filter:Alpha(opacity = 50);

9、如何制作在网页上半透明的PNG纯色图?

用抄photoshop，新建一个图像，纯色填充。在图层面板里面双击再确定解锁这个图层，然后将这个图层的透明度调成50%（可根据需要自己调整）。保存格式为png。网页里面将div的背景图像设置为这个png即可。
PS：png透明在IE6下不可用。IE6下如果要实现这种效果比较麻烦。
如果有问题可以追问或者Hi联系。

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

网页设计半透明

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