CSS 背景图片不透明度

引言

不透明度和透明度是同一事物的两面。它们都用于网站设计。借助它们，我们可以创建对比度并强化品牌的身份。CSS 中有许多网页设计技术。其中，我们有意使用不透明度和透明度。我们可以借助以下方法控制任何内容的不透明度。

• 背景
• text
• border
• 图片
• 渐变
• color

如何在 CSS 中设置不透明度

借助 CSS 的 opacity 属性，我们可以为图像、元素或文本设置不透明度。不透明度值的范围在 0 到 1 之间。如果我们将不透明度值设置为 0，则元素将完全透明或不可见。如果我们将不透明度值设置为 1，则元素将完全不透明。让我们通过一个例子来理解这一点。

示例 1

HTML 代码

输出

CSS 背景不透明度

当需要使背景元素更透明时，我们需要使用 CSS 背景不透明度。但我们必须记住，我们不能为不透明元素提供样式属性，但可以为子元素提供样式属性。让我们通过一个例子来理解这一点。

示例 2

代码

输出

说明

在上面的代码中，我们创建了一个具有背景图像的半透明背景。

文本不透明度 CSS

我们还可以为 CSS 文本提供不透明度功能。这与为元素的背景提供不透明度属性非常相似。我们还可以为整个元素设置不透明度属性——背景、元素内的文本、边框以及所有其他内容。要实现文本的不透明度，我们必须为目标元素提供 CSS color 属性和 RGBA 颜色值。让我们通过下面的例子来理解这一点。

示例 3

代码

输出

说明

在上面的代码中，我们创建了一个包含不透明度降低的文本的网页。

边框不透明度 CSS

我们还可以为边框设置不透明度属性，这与为文本元素提供不透明度属性类似。因此，为了实现这一点，我们必须为目标元素提供不透明度属性。然后，我们必须使用 CSS 简写 border 属性和 RGBA 颜色值。

示例 4

代码

输出

说明

在上面的代码中，我们使用 ::before 伪元素创建了不透明度降低的边框。

CSS 中的图像不透明度

我们还可以为图像提供 CSS opacity 属性。我们可以通过鼠标悬停在元素上来使用完美的不透明度属性。我们可以将图像设置为半透明，然后当用户将鼠标悬停在其上时变为不透明。这称为反向透明悬停效果。

示例 5

代码

输出

CSS 不透明度渐变

我们还可以通过使用不透明度属性来提供 CSS 渐变属性，其中一种颜色似乎会变为另一种颜色。颜色会沿特定方向变化，例如从上到下、从左到右或对角线。我们必须记住，我们不需要将颜色渐变从一种颜色更改为另一种颜色。我们必须为一种颜色提供渐变功能，使其逐渐从完全不透明变为完全透明。

为此，无需使用 CSS 渐变属性。我们必须借助 background 属性和 RGBA 颜色值。这与更改网页背景颜色非常相似。让我们通过下面的例子来理解这一点。

示例 6

代码

输出

说明

在上面的代码中，我们创建了一个具有 CSS 不透明度渐变背景的盒子。在上面的代码中，我们还创建了渐变，它从顶部半透明红色（rgba(255, 0, 0, 0.8)）变为底部半透明蓝色（rgba(0, 0, 255, 0.8)）。

CSS 颜色不透明度

在上面的程序中，我们已经看到了如何更改背景的颜色。在那里，我们使用 opacity 属性和 RGBA 颜色模型来更改背景颜色。但是现在我们必须借助 HSL 颜色来更改颜色。在 CSS 中，HSL 颜色是一种颜色属性类型，其中我们可以指定色相、饱和度、亮度以及颜色的透明度。HSLA 颜色的格式类似于 RGBA 颜色代码。让我们通过下面的例子来理解这一点。

示例 7

代码

输出

说明

在上面的代码中，我们创建了一个包含背景颜色的盒子。在此代码中，我们使用了 rgba()，它使用红、绿、蓝和 Alpha（不透明度）值定义颜色。