如何通过cssrgba()函数设置半透明背景

哦，我们来谈谈rgba()。
两年前我接手这份工作时，客户想要半透明的背景效果。
我当时就用这个。

看，比方说 rgba(0,0,0,0.5 );这个0.5 就是透明度。
以这种方式设置背景仍然会模糊文本和其他内容。

我记得有一次错误地将不透明度设置为 0.5 令人惊奇的是，整个盒子，包括文字和图片，都变得透明，让人看不清文字。
因此，如果想让背景或边框部分透明，最好使用rgba()。

此外，例如在创建按钮时，我使用了 color: rgba(2 5 5 ,2 5 5 ,2 5 5 ,0.7 );对于按钮文本，白色文本不那么刺眼，看起来更柔和。

或者使用 box-shadow 创建阴影： 0 4 px 8 px rgba(0,0,0,0.2 );这样阴影就不会像不透明那样硬而且看起来更自然。

就兼容性而言，我做项目时Chrome和Firefox都很好。
如果您遇到 IE8 等较旧的浏览器，请将其降级。
先写000000，然后rgba(0,0,0,0.5 )；如果不支持 rgba，请使用纯色。

简单实用。
重要的是不要错误地使用不透明度。
结果，子元素变得透明。

css设置边框border透明度，设置阴影透明度

边界透明度是错误的。
透明度是最后的。

边框：1 px实体rgba(1 5 1 ,1 5 1 ,1 5 1 ,0.3 );
阴影透明度为真。
rgba(4 1 ,1 2 ,1 2 7 ,0.2 )的值没有问题。

边框颜色RGB正确，但透明度位置不正确。
你自己看看吧。

CSS的opacity和rgba有什么区别？如何实现半透明？

2 02 3 年，我们了解到CSS和rgba不透明度完全不同，作用机制不同，影响范围也不同。

上周，有朋友问我，opacity影响整个元素及其所有子元素，改变整体透明度，而rgba只影响定义的颜色属性。

例如，使用不透明度使整个元素及其内容透明，如下所示： .element{不透明度：0.5 ;} 简单直接，但可能会导致文本变薄。

像这样使用rgba： .element{背景颜色:rgba(2 5 5 ,0,0,0.5 );} 背景是半透明的，但里面的文字不受影响。

朋友还问如果我想要背景半透明，文字清晰，应该用哪一个？我们建议使用 rgba。

我还认为不透明是遗传的。
例如，父元素的不透明度为0.5 ，子元素的不透明度为0.8 ，实际透明度为0.4
Rgba没有继承。
例如，如果父元素将其背景颜色设置为RGBA，则子元素的背景颜色、文本颜色等将完全独立。

因此，如果您需要更精细地控制透明度，则 rgba 更好。
当然，在某些情况下你也可以将两者结合起来，实现动画效果或者伪元素叠加效果等复杂效果。
由你决定。