“我想指定图像和背景的透明度 ！”

使用 CSS opacity 和 rgba，您可以轻松确定图像和背景的透明度。

即便如此，事实是许多人发现很难区分两者，因为它往往很模糊。

在这篇文章中，我们将为这样的人解释一下opacity和rgba的区别！

请读完本文并掌握指定透明度的使用！

opacity和rgba之间最大的区别是“属性和属性值的区别” 。

CSS就是指定“在哪里、什么、如何”改变。

决定“什么”的属性是不透明度。

rgba指的是决定“如何”的属性值。

不透明度是 CSS 属性。

所以你可以决定整个选择器的透明度。

例如，当使用不透明度时，代码如下所示：

html

css

不透明度可以指定在 0 到 1 之间，数字越小，透明度越高。

当你实际使用不透明度时，你可以看到整个选择器=图像和文本都是高度透明的。

rgba 指的是 CSS 属性值。

因此，它具有指定“背景”和“颜色”等属性值的作用。

rgba 是一种称为 RGB 颜色模型的颜色表达方法，其中添加了代表颜色透明度的 alpha，通过混合红/绿/蓝来再现颜色。

例如，十六进制的颜色“#e55550”在rgb中表示为“229,85,80” 。

opacity指定整个选择器，而rgba可以分别改变背景颜色和文本颜色。

例如，当使用rgba时，代码如下所示。

html

css

alpha，表示rgba的透明度，可以指定在0到1之间，数字越小，透明度越高。

从图中可以看到，这次指定为“背景”，因此在不改变文本颜色的情况下，背景颜色几乎是透明的。

现在您知道每个名称是什么，让我们比较一下两者之间的差异。

这次，我们将使用 CSS 更改此 html 的装饰。

html

另一方面，opacity用于使整体透明，rgba用于使背景颜色透明，rgba用于使字符透明。

让我们看看如何使用 opacity 和 rgba 实际指定透明度。

这两种方法需要根据要透明的对象正确使用。使用opacity

实现整体透明度，例如图像，使用rgba实现文本和可以着色的元素。

不透明度可以使整个对象（例如图像）变得透明。

您还可以通过指定图像的不透明度来使文本突出。

不透明度可以用1到0之间的数字表示，其中1表示不变且不透明。

0是完全透明的，什么也看不见。

透明度值可以用小数值设置。

通过使图像透明，您可以使文本更易于阅读，并创建一个具有深度的网站，抑制压力感。

CSS

在上面的代码中，不透明度设置为0.5 。

将要使其透明的元素应用到选择器并设置不透明度的值。

这里我们使用 image，一个指示图像的选择器，作为我们想要使其透明的元素。

通过将其用于多个图像，您可以创建各种表达方式，例如重叠的透明图像。

此外，不透明度还可以用于盒子元素，扩大了设计范围。

怎么变透明

接下来，我将向您展示如何在鼠标悬停在元素上时使元素透明。可以在{ 

前面加上:hover 来表示鼠标悬停在其上时的状态。

CSS

这里，选择器设置为 image ，表示图像，并将opacity的值设置为0.5 ，表示透明度。

这允许您在鼠标悬停在元素上时使元素透明，从而轻松创建移动站点。

rgba是一个使对象着色为透明的标签。

可以着色的对象包括文本、文本背景和边框。

例如，通过使用rgba，您可以仅使字符的背景透明，而使字符保持原样。稍后将解释该方法。

rgba用四个数字表示目标颜色和透明度。

r代表红色， g代表绿色， b代表蓝色，a代表alpha。_

表示透明度的值与 opacity 一样为0 到 1，0表示透明，1 表示不透明。

您还可以使文本透明以使背景图像突出。

CSS

使用此代码将应用半透明的黑色，因为透明度值为 0.5

通过使用 rgba 使背景透明，您可以仅使背景透明，同时保持字符不变。

CSS

在CSS中为background-color选择背景颜色，并为rgba选择值。

该代码代表浅黄绿色，透明度为0.5。

即使用 CSS 指定透明度，也可能不会反映出来。

在这种情况下，请检查您的浏览器是否兼容。

以下浏览器不支持透明度。

火狐浏览器3.0或以上

任何版本的 Google Chrome

Safari 3.0 或更高版本

Opera 10.0 或更高版本

Internet Explorer 9.0 或更高版本

我认为在 CSS 中确定颜色时经常使用十六进制数字。

在指定由 rgba 中的此类十六进制数字表示的颜色时，请充分利用转换位点。

您可以使用opacity使整个选择器透明，使用rgba使颜色可变部分透明。

确保您知道要使哪一部分透明，并能够正确使用这两个部分。

我相信它将极大地扩展网页设计的范围！

本文来源：词雅网

本文地址：https://www.ciyawang.com/css-specifying-transparency.html

本文使用「 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 」许可协议授权，转载或使用请署名并注明出处。