HTML5怎么设置透明色

使用 CSS 设置 HTML 标签的背景颜色和透明度非常简单。
看这个例子，三个div的背景都是黑色的，但是透明度不同。

第一个 div，其 ID 为 test-1 ，背景色为黑色且不透明。
CSS中写的是test-1 {background-color:rgba(0,0,0,1 );}，这里的1 表示1 00%不透明。

第二个div，ID是test-2 ，背景色也是黑色，但是5 0%透明。
CSS中写的是test-2 {background-color:rgba(0,0,0,0.5 );}，其中0.5 是5 0%透明。

第三个div，ID为test-3 ，背景色仍然是黑色，但只有2 0%透明。
CSS中写的是test-3 {background-color:rgba(0,0,0,0.2 );}，其中0.2 是2 0%透明。

这种RGBA颜色格式，前三个参数是红绿蓝，最后一个参数是透明度。
透明度范围从 0 到 1 ，0 表示完全透明，1 表示完全不透明。
如果你看这个例子，颜色全是黑色，但透明度不同，效果也不同。

HTML 图片的透明度怎么调节

记得有一次，我正在做一个产品展示页面，图片需要半透明的效果来突出文字内容。
当时我就在想，是直接降低图片的透明度，还是直接把背景设为透明呢？最后我选择了后者，因为我想保留图像本身的清晰度。

我使用CSS rgba属性来设置背景透明度，但图像本身保持不变。
效果出来后，感觉还不错。
文字内容清晰可见，背景也不那么突兀。
这个小实验让我意识到透明度是网页设计中非常实用的技术，可以产生意想不到的效果。

不过我也发现了一个问题，就是当背景透明度设置太高时，文字的对比度不够，看起来有点生硬。
后来我调整了文字的颜色和大小，终于达到了满意的效果。

等一下，我突然想到，如果这个页面适配不同的设备，比如手机或者平板，透明效果会不会受到影响？这是另一个需要考虑的问题。

html字体颜色如何设置透明度

说白了，为 HTML 字体设置颜色透明度的最可靠方法是使用 rgba()，但较旧的 IE 需要兼容层。

首先我们来说说最重要的rgba()。
去年我们做一个电商项目，就把这个方法应用到了整个网站。
它与 Chrome 和 Edge 兼容，没有任何问题。
将alpha值调整为0.7 刚刚好。
另一件要记住的事情是，不透明度会影响整个元素的背景。
例如，如果你在p标签上使用opacity:0.5 ，它会模糊背景，这真的很烦人。
还有另一个重要的细节。
页数约为 3 ,000 页。
将太多元素设置为半透明将强制浏览器使用硬件加速。
后来我发现这是错误的。
即使你卡在PPT里，也不会这样。

一开始我以为十六进制的AA值可以在现有的IE中使用，但是我发现它是使用过滤器实现的。
代码太丑了，看起来就像是上个世纪的，所以我很快就把它扔掉了。
等等，还有一件事。
CSS 预处理器非常方便，但它们并不是为了变量而使用变量。
最终，编译的代码量会增加一倍。

简单来说，在现代项目中你可以直接使用 rgba() ，在旧的 IE 时代你只需添加一个过滤器来掩盖它。
但你认为当 IE 彻底消失后，不透明度也应该被抛弃吗？