本文由陈陆扬根据Carrie Cousins的《USING TRANSPARENCY IN WEB DESIGN: DOS AND DON’TS》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos-and-donts，以及作者相关信息
译者：陈陆扬
为了扩展你的设计风格，尝试如何利用透明这一特性是一个不错的选择。如同其他特效一样，你需要合理有效的利用这种技术并在多种环境下检验其设计，以确保能正常运作并像你所希望的那样呈现。
透明可以使网页变得美丽而且狡黠。透明可以使一个颜色块，一段文字或者一张图片看起来“变薄”或变淡，稀释颜色使在后面的内容可以显现出来。
若处理得当，能为文字创建合适的区域，或将人们的注意力集中到图片的特定部分，效果将相当令人惊讶。
设计者在使用透明的时候必须小心翼翼，因为要处理好这种效果很不容易，其中可读性是一个经常被考虑的重点。透明盒子和文字如果运用不当将吸引不了用户的注意力，并从整体设计中脱离开来。
以下是一些有关透明的要与不要，并附上处理效果优美的例子。
要用透明凸显对比
最大的好处是使用透明度作为一种设计手法，凸显了对比。设计者可以用这种效果来创建颜色块焦点，也可以将大段文字置于图片之上，或者作为不同颜色的屏幕尺寸。
透明度也可以用来帮助文本从背景中跳到你眼前，而原本这个背景可能达不到展示的效果。
使用透明前需要慎重考虑一下对比效果，只有当图片（或者背景）和文字是可读的情况下，透明才是产生作用的。当你打算采用透明效果时，问一下自己：这样做能让用户更容易去理解这段文字或图片吗？
不要遮挡图片的重要部分
透明层不应当遮盖下层图片或背景重要的信息部分。在决定使用透明层的时候需要清楚得知道哪一部分会“消失”。
要用不同的透明度
没有完美的透明度。对于一些项目来说，80%的透明度是理想值；而对于其他的来说，可能15%是最好的。对于不同项目，运用不同的透明度数。
不要认为透明就可以使文字变的可读
不能因为在文字底下用了透明盒子，你就认为文字自动变成可读了。从透明盒子到文字，和从背景图片到透明边框，都需要考虑到对比。
当修改图片、颜色盒子和文字的透明度时，最重要的是考虑文字的可读性。记住，如果设计效果使文字变得模糊、不可认，那你的信息将无法表现出来。
要在小范围中使用透明度
透明效果不只是为网站的主体服务的，在一些小范围内使用也能达到很好的效果。
想想这种设计效果：利用透明层来突出导航工具，或者用作按钮或可点击元素的悬停效果。去试试，不过也不要用的太疯狂。选好一个元素和透明效果，并在整站的设计中坚持下去。
不要在具有强烈对比的图像上使用透明
考虑到可读性的原因，我们在设计的时候最好避免将透明层覆盖到本身具有强烈对比的元素中， 比如黑和白或者其他在色环上相互对立的颜色。
除非饱和色对你的设计有负面影响，才在这些元素上使用透明度，因为这很难在背景的所有部门创建正确的效果。试试用颜色框来代替。
要把透明的使用当做艺术
透明不是一种二等效果。你可以考虑在网站的主要图片上使用透明效果。
一个巨大的透明层可以以一种令人吃惊的方式创造出对比，强调和突出视觉。
不要将透明当作装饰
透明不是因为你厌倦了这次设计而去事后添加的一种效果。如果仅仅把它当作一种装饰的话势必会陷入设计上的困境。
你应该提前考虑并计划如果使用透明，这不是像变粗那样简单的效果，如果运用不当会显得随意且不专业。
要在背景层使用透明
透明效果不仅仅使用在设计第一线的元素上，在背景图片中也可以运用。一些最好的透明元素往往是不容易被察觉的。
其他的透明设计或许会在图像层之间显得支离破碎。但Tony Chester的网站则巧妙的运用透明布局技巧，创建了一种多维的设计。
不要同时使用多种透明效果
每一个项目中不能无限的使用不同的透明效果。透明应该呈现出区别，对比和抓住人眼球。过度的使用反而会分散用户的注意力。
要在静止和（或）旋转图像上使用透明
透明的使用不局限于单页和静止的设计，也可以在变化的图像和背景上，两者皆可。
在旋转图像上使用透明效果是最棘手的处理方式之一，但也是最令人印象深刻的。在设计多层背景图片的时候需要格外当心。背景图在不停的移动，需要找到一个适合的透明对比色。
注意给每个图像设置合适的透明度，这样才能维持图像的整体性，创建出可读的图片、背景、文字，并且保持视觉的持续性。
总结
为了扩展你的设计风格，试验如何利用透明这一特性是一个不错的选择。如同其他特效一样，你需要合理有效的利用这种技术并在多种环境下检验其设计，以确保能正常运作并像你所希望的那样呈现。
使用透明最大的挑战在于当图片交替变化的时候，文字得依然可读，并且确保透明元素不会错误得遮挡下层内容。
尝试不同的透明度和用法，比如作用在图像，背景上，或者当作悬停效果，以此来决定哪种最适合这个项目。
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
关于陈陆扬
毕业于东北大学，从事前端开发，目前主要关注无线方面。对前端技术有强烈的兴趣，希望有机会和大家交流。新浪微博
如需转载烦请注明出处：
英文原文：http://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos-and-donts
中文译文：http://www.w3cplus.com/css/using-transparency-in-web-design-dos-and-donts.html