使用 CSS 的不透明度过渡

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

使用 CSS 的不透明度过渡

作者：迹忆客最近更新：2023/04/27 浏览次数：

层叠样式表，也称为 CSS，是一种我们可以将网页样式与 HTML 和 XHTML 等标记语言一起使用的语言。 CSS 为样式提供了各种属性，我们可以将它们添加到 CSS 文件或 HTML 或 XHTML 文件中。

opacity 属性

CSS 提供的属性之一是不透明度。不透明度是元素的透明度：图像、形状或内容。

我们可以使用以下语法向元素添加不透明度。

语法：

Opacity: value

在这里，值是指我们应该为该元素提供多少透明度。我们应该给它一个十进制值，它应该在 0 和 1 之间。

0表示元素完全透明，1表示完全可见。您可以给这两个数字之间的任何值来增加或减少透明度。

例如，如果您希望元素半透明，您可以指定 0.5 作为它的值。如果需要稍微可见的元素，可以提供 0.2 或 0.3。

如果你想要一个几乎不透明的元素，你可以使用 0.8 或 0.7。

Opacity: 0.5;

transition属性

如果我们需要给一个元素一个过渡，我们可以在 CSS 中使用 transition 属性。这个属性有几个属性。


transition-delay	如果你需要延迟你的过渡，这是你需要的属性。
transition-duration	此属性指定完成转换需要多长时间。
transition-property	该属性描述了哪些 CSS 属性应该受到过渡效果的影响。
transition-timing-function	您可以使用此属性来加快或减慢过渡。

本文将讨论使用 CSS 向元素添加不透明度过渡。我们必须使用不透明度和过渡属性。

我们举两个例子。作为第一个示例，我们将创建一个按钮作为元素，并添加不透明度过渡。

在第二个示例中，我们将向图像和文本添加不透明度过渡。

使用 CSS 向按钮添加不透明度过渡

首先，让我们使用 HTML 创建一个按钮。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Opacity Transition</title>
    </head>
    <body>
        <!-- creating the button -->
        <div>
            <button class="btn">Click Here</button>
        </div>
    </body>
</html>

在上面的代码中，我们创建了一个带有类 btn 的按钮。

设置按钮样式

现在让我们使用 CSS 为我们的按钮添加一些样式。对于此示例，我们将向按钮添加以下样式。

蓝色背景。
字体颜色为白色，大小为 30px。
1px 边框和 10px 作为它的半径。
一个 10px 的填充。

.btn{
    background-color: blue;
    color: white;
    font-size: 30px;
    border: 1px;
    border-radius: 10px;
    padding: 10px;
}

所以现在我们已经完成了按钮的样式设计。

添加不透明度过渡

现在，让我们将不透明度过渡添加到按钮，如下所示。

.btn:hover{
    opacity: 0.5;
    transition-duration: 1s;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Opacity Transition</title>
    </head>
    <body>
        <!-- creating the button -->
        <div>
            <button class="btn">Click Here</button>
        </div>
    </body>
</html>

悬停选择器是 CSS 提供的伪类类型选项。当我们将光标移到元素上时，我们可以选择元素。

所以在上面的代码中，当我们将鼠标悬停在按钮上时，它将是半透明的，因为我们将 0.5 作为不透明度值。我们提供了 1 秒作为过渡持续时间，以便更清楚地看到过渡。

现在，当我们将鼠标悬停在按钮上时，它的颜色将是半蓝色，如下所示。

完整的 CSS 代码：

/* Styling the button */
.btn{
    background-color: blue;
    color: white;
    border: 1px;
    border-radius: 10px;
    font-size: 30px;
    padding: 10px;
}

/* Adding opacity transition */
.btn:hover{
    opacity: 0.5;
    transition-duration: .25s;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Opacity Transition</title>
    </head>
    <body>
        <!-- creating the button -->
        <div>
            <button class="btn">Click Here</button>
        </div>
    </body>
</html>

使用 CSS 向图像和文本添加不透明度过渡

插入图像和文本

让我们尝试将不透明度过渡添加到图像和文本。首先，我们需要使用 HTML 插入图像，如下面的代码块所示。

<img class="img" src="/img/jiyik/logo.png" alt="alternatetext">

我们可以把文字放在图片下面。

<p class="text">This is a picture</p>

现在我们的 HTML 代码应该是这样的。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Opacity transition</title>
    </head>
    <body>
        <div>
            <!-- Inserting an image -->
            <img class="img" src="/img/jiyik/logo.png" alt="alternatetext">
            <!-- Inserting a text -->
            <p class="text">This is a picture</p>
        </div>
    </body>
</html>

为图像和文本添加样式

我们可以添加一些样式来清楚地了解该过程。

/* Styling the image */
.img{
    width:25%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Styling the text */
.text{
    text-align: center;
    font-size: 20px;
    margin-left: 45%;
    margin-right: 45%;
}

在这里，我们插入了较小尺寸的图像并将其居中。我们已经设置了文本的字体大小并将其居中放置在图像下方。

添加不透明度过渡

现在我们可以使用下面的代码块将不透明度过渡设置为图像和文本。

.img:hover, .text:hover{
    opacity: 0.2;
    transition-duration: .25s;
}
Full CSS code:

/* Styling the image */
.img{
    width:25%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Styling the text */
.text{
    text-align: center;
    font-size: 20px;
    margin-left: 45%;
    margin-right: 45%;
}

/* adding opacity transition*/
.img:hover, .text:hover{
    opacity: 0.2;
    transition-duration: .25s;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Opacity transition</title>
    </head>
    <body>
        <div>
            <!-- Inserting an image -->
            <img class="img" src="/img/DelftStack/logo.png" alt="alternatetext">
            <!-- Inserting a text -->
            <p class="text">This is a picture</p>
        </div>
    </body>
</html>

现在，当我们将光标移到图像和文本上时，两个元素都会稍微可见，因为我们已将不透明度值设置为 0.2。

如果要隐藏元素（图像和文本），可以将不透明度值设置为 0。

总结

本文讨论了如何使用 CSS 属性将不透明度过渡添加到元素：不透明度和过渡。对于本文章，我们将不透明度过渡添加到按钮、图像和文本作为示例来解释该过程。

上一篇：使用 CSS 实现淡出过渡

下一篇：在 CSS 中居中一个按钮

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

覆盖 Bootstrap CSS

发布时间：2023/04/28 浏览次数：59 分类：CSS

本文介绍的是著名的 CSS UI 框架 Bootstrap。我们将讨论使用自定义样式覆盖 Bootstrap CSS 的过程。

使用 CSS 制作带圆角的 HTML 表格

发布时间：2023/04/28 浏览次数：107 分类：CSS

这个简短的文章是关于在 HTML 页面上制作圆角表格的 CSS 样式。使用 CSS 制作带圆角的 HTML 表格使图像、表格或 div 段的角变圆的属性是 border-radius。

CSS 设置轮廓 outline 的半径

发布时间：2023/04/28 浏览次数：123 分类：CSS

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

使用 CSS 居中视频

发布时间：2023/04/28 浏览次数：73 分类：CSS

在本文中，用户将学习仅使用 CSS 将 <video> 元素居中。我们已经在下面解释了使用 CSS 使视频居中的多种方法。

使用 CSS 居中内联块

发布时间：2023/04/28 浏览次数：108 分类：CSS

在本文中，我们将创建多个 HTML 元素并将其显示设置为 inline-block。之后，我们将学习使用 display: inline-block 将所有元素居中。

使用 CSS 添加透明边框

发布时间：2023/04/28 浏览次数：98 分类：CSS

在本文中，我们将讨论在 HTML 中的图像、按钮或任何其他对象周围创建透明边框。透明边框是图像或对象周围的边框，可改善用户体验。

使用 CSS 向上移动文本

发布时间：2023/04/28 浏览次数：153 分类：CSS

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。我们将学习如何使用 css 从网页底部向上移动文本。

使用 CSS 和 JavaScript 制作文本闪烁

发布时间：2023/04/28 浏览次数：146 分类：CSS

本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。

CSS 防止文本选择

发布时间：2023/04/28 浏览次数：75 分类：CSS

在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。此外，您还将了解如何为不同的 Web 浏览器使用该属性。

迹忆客专注技术分享