透明表盘指南针 app_指南：在Web设计中使用透明度（不透明度）

透明度是一种使我们能够看到其底下的效果 。在设计中，透明度可能会造成一个看起来比实际更宽敞的区域的错觉。如果做得对，甚至可以使整体设计看起来更优雅。在Photoshop中，可以通过减小不透明度或填充来轻松实现这种效果，但是在网站空间中则是另一回事。

在本文中，我们将研究这种特殊效果在网络空间中的发展历程，其中包括回顾几年以了解CSS3出现之前的效果。

IEpngfix –老派

在过去， 透明效果通常是使用透明PNG来完成的，众所周知，PNG也存在一些缺点。

例如，在Internet Explorer 6中，透明的PNG会（确实）很难呈现，尽管这种情况可以通过此JavaScript库解决，但是如果我们的网站中只有一小部分透明的PNG，则完全不需要应用此库。

另一个问题是，当我们添加图像时，我们还将添加更多HTTP请求供浏览器处理。当涉及大量图像时 ，这些图像可能会降低我们网站的性能。

优点

当您熟悉Photoshop等图像编辑器时，相对容易应用
广泛的浏览器支持

缺点

在IE6中看起来很丑
带来额外的HTTP请求

不透明度

有一种更简单的方法可以在网站中创建透明度 ，即使用opacity CSS属性。此属性刚刚正式包含在CSS3中，但支持范围通常比其他CSS3属性要广。据caniuse.com称，不透明性最早在Firefox 2和Chrome 4中得到支持。

现在，让我们看下面的示例。

div {width: 200px;height: 200px;background-color: #fff;opacity: 0.5;
}

该代码将导致白框具有0.5或50%透明度， opacity表示法的范围为1到0 ，其中1将使元素变为实心，而0将使目标元素完全不可见。

应用opacity时，您应该记住一些事情。此属性将影响元素内部的任何内容，假设我们在此框中有一些文本，该文本在50％时也是透明的。

同样，在IE8或更早版本中，我们需要将此属性替换为filter，例如filter: alpha(opacity=50) 。

优点

易于实施
跨浏览器支持，（IE需要“过滤器”）
没有HTTP请求

缺点

如图所示影响整个元素

阿尔法频道

我们可以采用的另一种方法是使用RGBa和HSLa的Alpha通道（我认为这比前两种方法更好）。与降低整个元素的不透明度的opacity属性不同，alpha通道仅影响颜色密度。

让我们在下面看这个例子。

div {width: 200px;height: 200px;background-color: rgba(255,255,255,0.5);
}

我们仍然有相同的框，但是现在我们将background-color替换为RGBa颜色功能，并将alpha通道降低到0.5 。该代码将产生与opacity属性相似的效果，但是由于alpha通道基本上仅控制颜色密度，因此其内部的其他元素不会受到影响。

就HSLa而言，它的工作原理没有什么不同，只是颜色由色相，饱和度和亮度组成。如果您使用的是Photoshop，则此颜色功能的作用类似于下面的窗口对话框，位于“ 图像”>“调整”>“色相/饱和度”菜单中。

优点

易于实施
没有HTTP请求

缺点

RGBa和HSLa在Internet Explorer 8及更早版本中将不起作用

过滤器属性– IE方法

Internet Explorer似乎总是采用与行业标准不同的途径。如上所述，RGBa或HSLa在Internet Explorer（版本8和更早版本）中将不起作用。相反，Internet Explorer奇怪地使用#ARGB及其专有的filter属性。

什么是#ARGB？老实说，我也不太了解它，但它基本上不等于表面上的RGBa。 RGB值的范围是0到255，而#ARGB是十六进制的。

这是我们如何应用此颜色功能的方法；

div {width: 200px;height: 200px;background-color: rgba(255,255,255,0.5);-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF);zoom: 1;
}

我们仍在处理同一框，这一次我们为IE添加了filter和-ms-filter 。请注意，此十六进制数字#80FFFFFF实际上是从rgba(255,255,255,0.5)转换而来的，为了使事情变得更容易，您可以使用此工具Web-Color Converter，将RGBa以及其他颜色格式转换为#RGBA。

优点

适用于Internet Explorer 8和更早版本

缺点

同时，它仅在IE中有效
语法和颜色格式不容易理解

哪个最好？

简而言之， 取决于 。以上所有做法均有效，但每个网站都有其自身的局限性。因此，现在由Web开发人员和设计师来决定哪种方法更适合您的网站？并且，为了激发您的灵感，我们在下面收集了一些示例的透明度示例，这些示例是通过本文前面讨论的实践实现的。

使用透明的PNG

翻译自: https://www.hongkiat.com/blog/web-transparency/