如何使用不透明度和透明度在CSS中创建模态

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

使用 CSS 设置 HTML 样式时，有多种方法可以调整元素的不透明度，并且有多种原因可以在设计中使用这种效果。不透明度可以帮助柔化阴影，在特定任务期间淡化非必要内容，或淡入或淡出视图。您可以使用 opacity 属性、transparent 颜色名称或 alpha 通道 来实现这些效果，它们是颜色值的扩展，带有用于控制不透明度的附加段。

在本教程中，您将使用各种方法来应用不透明度和额外的属性来有效地完成某些效果。您将使用 :target 伪类和 opacity、pointer-events 和 transition 属性创建一个以非 JavaScript 方法显示的模式。然后，您将使用每个 Alpha 通道颜色值来创建阴影、边框和内容覆盖。您还将使用 transparent 颜色值来帮助在 :hover 事件上制作渐变动画颜色。

先决条件

了解 CSS 的级联和特异性特性，您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 获得。
类型选择器、组合选择器和选择器组的知识，您可以在如何选择 HTML 元素以使用 CSS 设置样式中找到这些知识。
了解 color 属性。请参阅如何在 CSS 中使用颜色值以了解有关在 CSS 中使用颜色的更多信息。
具有 background 属性的 CSS 渐变知识。查看如何使用 CSS 将背景样式应用于 HTML 元素，以获得创建渐变背景的经验。
体验 box-shadow 属性，您可以在如何在 CSS 中使用边框、阴影和轮廓设置 HTML 元素的边缘样式中了解更多信息。
在您的本地计算机上保存为 index.html 的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置您的 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您是 HTML 新手，请尝试整个如何用 HTML 构建网站系列。

设置基本 HTML 和 CSS

在第一部分中，您将为在整个教程中编写的视觉样式设置 HTML。您还将创建 styles.css 文件并添加设置内容布局的样式。

首先，在文本编辑器中打开 index.html 文件。然后，将以下 HTML 添加到文件中：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Destination: Moon</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700&display=swap" rel="stylesheet">
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

在 HTML 的 <head> 元素中定义了几个页面设置。 <meta> 元素定义了用于文本的字符集，它告诉浏览器如何在不使用 HTML 字符代码的情况下解释代码中的特殊字符。 <title> 元素为浏览器提供页面的标题。 <link> 元素加载到页面样式中。前三个从 Google Fonts 加载字体 Museo Moderno，最后一个加载您将添加到 styles.css 的样式。

接下来，页面将需要设置样式的内容。您将使用来自 Sagan Ipsum 的示例内容作为填充副本以与样式一起使用。您还将为站点标题应用 HTML，其中包含站点名称和一个小导航栏。在文本编辑器中返回 index.html 并添加以下代码块中突出显示的 HTML：

索引.html

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <header class="site-header">
      <h1 class="site-name">Destination: <strong>Moon</strong></h1>
      <nav>
        <ul class="nav-list">
          <li><a href="#" class="nav-link">Base Station</a></li>
          <li><a href="#" class="nav-link">Travel Packages</a></li>
          <li><a href="#" class="nav-link">Accommodations</a></li>
          <li><a href="#" class="nav-link">Plan Your Trip</a></li>
      </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Schedule Your Trip</h2>
        <p>Sea of Tranquility great turbulent clouds with pretty stories for which there's little good evidence extraordinary claims require extraordinary evidence. Citizens of distant epochs rings of Uranus intelligent beings birth take root and flourish across the centuries. Corpus callosum invent the universe as a patch of light the only home we've ever known a mote of dust suspended in a sunbeam made in the interiors of collapsing stars. Kindling the energy hidden in matter Orion's sword.</p>
        <p>Vastness is bearable only through love emerged into consciousness not a sunrise but a galaxyrise emerged into consciousness courage of our questions across the centuries and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
          <a href="#" class="button">Read the Disclaimer!</a>
      </section>
    </main>
  </body>
</html>

请务必保存 index.html 文件并在文本编辑器中保持打开状态。接下来，创建一个名为 styles.css 的新文件并在文本编辑器中打开它。这是在 index.html 的 <head> 元素中引用的文件。在 styles.css 文件中，添加以下代码：

样式.css

body {
  margin: 0;
  font: 100%/1.5 sans-serif;
}

main {
  margin: 6rem auto;
  width: 75ch;
  font-size: 1.125rem;
}

h2 {
  font: 400 1.875rem/1.25 MuseoModerno, sans-serif;
  color: #6b2d6b;
}

.site-header {
  font: 1.125rem / 1.25 MuseoModerno, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  color: white;
  background: linear-gradient(135deg, #8e3d8e, #230f23);
}

.site-name {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: stretch;
}

.nav-link {
  color: inherit;
  display: block;
  text-decoration: none;
  padding: 1.25rem 1.5rem;
}

.nav-link:hover,
.nav-link:focus {
  color: #230f23;
  background-color: white;
}

.button {
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 1.25rem;
  color: white;
  background: #4c90b2;
  border: 1px solid #2d566b;
  border-radius: 0.5rem;
}

.button:hover,
.button:focus {
  background-color: #2d566b;
}

这些样式设置了页面的总体美感和布局，这些样式应用于 body 和 main 元素。 .site-header、.site-name、.nav-list 和 .nav-link 选择器都定义了页眉的样式。 .button 和 .button:hover 规则将 <a> 元素更改为看起来像一个可点击的大按钮。

将更改保存到 styles.css，然后打开 Web 浏览器。选择 File 菜单项，然后选择 Open 选项。接下来，导航到您的项目文件夹并在浏览器中加载您的 index.html 文件。下图演示了页面将如何在浏览器中呈现：

到目前为止，您编写的 CSS 在页面顶部创建了一个紫色标题，其中包含网站标题和白色文本导航。下面，内容由一个紫色标题和两段文字组成。使用 main 元素选择器上的 max-width: 76ch 属性值将内容的宽度限制为 75 个字符。最后，带有文本 Read the Disclaimer! 的蓝色按钮是内容下方的大型交互式元素。

在本节中，您在 index.html 文件中设置了 HTML，并在 styles.css 文件中创建了基本样式。在下一节中，您将使用 opacity 属性使新元素消失并通过 :target 伪类重新出现。

使用 `opacity` 创建 `:target` 状态以显示和隐藏元素

opacity 属性的一个有用应用是使内容在屏幕上淡入淡出。这种效果的一个例子是当一个 modal，一个出现在页面其余内容前面的 UI 元素（也称为灯箱）被转换到视图中时. 您可以结合使用 opacity 和 pointer-events 属性以及 :target 伪类来创建此效果。

首先打开 index.html 以创建模态的内容。在 </section> 和 </main> 结束标记之间添加以下代码块中突出显示的 HTML：

索引.html

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <main>
      <section>
        ...
      </section>
      <div class="modal-container">
        <section class="modal">
          <header class="modal-header">
            <h2 class="modal-title">Destination: Moon Disclaimer</h2>
            <a href="#" class="modal-close">Close</a>
          </header>
          <div class="modal-content">
            <p><strong>Disclaimer:</strong> Vastness is bearable only through love emerged into consciousness not a sunrise but a galaxyrise emerged into consciousness courage of our questions across the centuries and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

将更改保存到 index.html，然后在文本编辑器中返回到 styles.css，并将以下代码块中突出显示的 CSS 附加到文件中：

样式.css

...

.button:hover {
  background-color: #2d566b;
}

.modal-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: black;
  display: flex;
}

.modal {
  margin: auto;
  width: 90%;
  max-width: 40rem;
  background-color: white;
  border-radius: 1.5rem;
}

.modal-header,
.modal-content {
  padding: 1.5rem;
}

.modal-container 类定义了一个区域，该区域将使用 fixed 元素覆盖整个可见空间。然后，.modal-container 上的 display: flex 与 .modal 选择器上的 margin: auto 组合将使内容在垂直和水平方向居中。

将您的更改保存到 styles.css 并返回浏览器以刷新 index.html。页面的内容不再可见，因为黑色覆盖层已经用白色容器占据了页面，如下图所示：

现在模态框已经就位并覆盖了页面的内容，在实例化之前需要隐藏它。 opacity 属性是一个较旧的属性，它允许在元素及其内容上放置半透明。 opacity 属性的取值范围可以是 0 到 1，中间可以有小数点。

要开始使用 opacity 属性，请在文本编辑器中返回 styles.css。在 .modal 类选择器上，添加一个值为 0 的 opacity 属性，如以下代码块中突出显示的：

样式.css

...
.modal-container {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
   background-color: black;
   display: flex;
  opacity: 0;
}
...

这将导致整个模态视图在屏幕上被视觉隐藏。模态应该只在需要时才可见。要实现这种有条件的外观，您可以使用 :target 伪类。

在 .modal-container 选择器之后，为 .modal-container:target 添加一个新选择器。在选择器块内，将另一个 opacity 属性设置为 1 的值。以下代码块中突出显示的 CSS 显示了它的格式：

样式.css

...
.modal-container {
  ...
  opacity: 0;
}

.modal-container:target {
  opacity: 1;
}
...

将这些更改保存到 styles.css。

当元素具有 URL 焦点时，将实例化 :target。在 Web 浏览器中，可以在 URL 中引用 HTML 元素上的 id 属性，用井号或井号 (#) 表示。为了激活 .modal-container:target，同一个元素需要一个 id 元素，并且页面需要一种方法来触发该 URL。

在文本编辑器中返回 index.html。在 <div class="modal-container"> 元素上，添加一个 id 属性设置为值 disclaimer。然后，在 <a href="#" class="button"> 元素上，将 href 的值从 # 更改为 #disclaimer。参考以下代码块中突出显示的 HTML 以了解其编写方式：

索引.html

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <main>
      <section>
         ...
         <a href="#disclaimer" class="button">Read the Disclaimer!</a>
       </section>
       <div id="disclaimer" class="modal-container">
         ...
       </div>
    </main>
  </body>
</html>

对 href 值的更改告诉浏览器转到当前页面的 id 值为 disclaimer 的元素。将 #disclaimer 添加到 URL 后，CSS 中的 :target 将激活。

将这些更改保存到 index.html，然后返回到 styles.css。

现在页面的结构方式，模态将捕获来自鼠标或触摸屏交互的所有点击和触摸事件。这是因为，虽然完全透明，但模态元素仍然覆盖了整个页面。为了从元素中删除交互性，您需要将值为 none 的 pointer-events 属性添加到 .modal-container 选择器。然后，一旦模态框可见，它就需要能够再次接收交互事件。在 :target 伪类上添加 pointer-events 设置为 all，如以下代码块中突出显示的：

样式.css

...
.modal-container {
  ...
  opacity: 0;
  pointer-events: none;
}

.modal-container:target {
  opacity: 1;
  pointer-events: all;
}
...

pointer-events 属性更改元素与鼠标或基于触摸的输入设备的交互方式。通过将值设置为 none，该元素不仅对有视力的用户变得不可见，而且对基于指针的输入设备也变得不可见。然后，all 值恢复交互，但仅当在 URL 中指定 .modal-container 为活动且可见时。

最后，要使模态框淡入和淡出视图，您将添加一个 transition 属性以在 opacity. 的 0 和 1 值之间进行动画处理

返回 styles.css 并将 transition 属性添加到 .modal-container 选择器，如以下代码块中突出显示的那样：

样式.css

...
.modal-container {
  ...
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.modal-container:target {
  opacity: 1;
  pointer-events: all;
}
...

transition 属性是一系列属性的简写。 opacity 告诉浏览器这是要转换的属性。 250ms 是过渡完成所需的时间，单位为毫秒。最后，ease 描述了转换将如何发生。在这种情况下，ease 表示它将开始缓慢，加速，然后在过渡结束时再次减速。

当模态出现并通过按下模态内的 Close 链接消失时，转换将起作用。此 Close 链接将 href 值设置为 #，这会将 URL 从 #disclaimer 更改为 #，删除 [ X134X] 状态。

将更改保存到 styles.css 并在浏览器中刷新 index.html。以下动画说明了模态将如何出现和消失：

本节向您介绍了 opacity 属性，您可以用它来直观地隐藏模态容器。您还使用了 :target 伪类、pointer-events 属性和 transition 属性来创建淡入和淡出效果。在下一节中，您将使用带有 Alpha 通道的颜色来使模态更加半透明。

使用 Alpha 通道创建透明颜色值

alpha 通道 类似于 opacity 属性，但它是通过 rgb()、hsl() 或十六进制定义的颜色值的附加段。 opacity 属性调整整个元素及其子元素，Alpha 通道仅调整给定属性上颜色的不透明度。在本节中，您将使用每个 Alpha 通道颜色值并将其付诸实践。

要开始使用 Alpha 通道颜色值，请在文本编辑器中打开 stlyes.css。然后转到 .modal-container 类选择器。将 background-color 属性的值从 #000 更改为 rgba(0, 0, 0, 0.75)，如以下代码块中突出显示的那样：

样式.css

...
.modal-container {
  ...
  background-color: rgba(0,0,0,0.75);
  ...
}
...

rgba() 颜色值的工作方式类似于 rgb()，包含三个以逗号分隔的数字，表示红色、绿色和蓝色光的级别。当其中一个颜色值设置为 0 时，它完全关闭（黑色），而 255 表示它处于全亮度（白色）。在这三个颜色通道之间，可以产生数百万种颜色。第四个数字是 alpha 通道，其作用类似于 opacity 属性，是从 0 到 1 的小数点值。对 Alpha 通道的调整会使颜色变得透明，从而使其后面的内容通过颜色变得可见。

将您的更改保存到 styles.css 并在 Web 浏览器中打开 index.html。按下 Read the Disclaimer! 按钮以激活模式。黑色叠加背景仍然是黑色，但现在也是透明的，露出了它背后的页面：

现在叠加层是透明的，转到模式并通过将背景更改为带有白色文本的紫色渐变来赋予它更多视觉样式。在文本编辑器中返回 styles.css 并从下一个代码块中添加以下突出显示的 CSS：

样式.css

...
.modal {
  margin: auto;
  width: 90%;
  max-width: 40rem;
  background: linear-gradient(135deg, hsl(300, 40%, 20%),hsl(300, 40%, 5%));
  border-radius: 1.5rem;
}

.modal-header,
.modal-content {
  padding: 1.5rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
}

.modal-title {
  margin: 0;
  color: white;
}

.modal-close {
  color: white;
}

.modal-content {
  color: white;
}

将此更新保存到 styles.css，然后在浏览器中刷新 index.html。 modal 的样式将更新并呈现，如下图所示：

现在，在文本编辑器中返回 styles.css。您现在将使用 hsla() 颜色值来减轻模态标题的颜色。您还需要将顶角设置为具有与模态匹配的 border-radius 值，因此标题不会出现在模态区域之外。以下代码块中突出显示的 CSS 演示了如何设置它：

样式.css

...
.modal-header {
  display: flex;
  justify-content: space-between;
  background-color: hsla(300, 80%, 90%, 0.2);
  border-radius: 1.5rem 1.5rem 0 0;
}
...

background-color 值使用 hsla() 格式，与 rgba() 值一样，它是 hsl() 格式，但带有 alpha 通道。 hsl() 由三部分组成：色轮的度数、饱和度百分比值和亮度百分比值，生成最终颜色。 300 将颜色值放在色轮上的蓝色和红色之间，80% 是重饱和度，意味着更多颜色和更少灰色，90% 使最终颜色变亮. 最后，alpha 通道与 opacity 属性的工作方式相同，并且 0.2 将值设置为更接近完全透明。这将在渐变顶部创建一个明亮的叠加层，为标题提供定义。

将这些更改保存到 styles.css 并返回浏览器刷新 index.html。模态框的标题现在对该区域有一个粉红色的突出显示，将其与模态框的内容区分开来。下图显示了模态标题现在如何在浏览器中呈现：

创建透明颜色值的另一种方法是使用十六进制值。十六进制颜色值由 0 到 9 或 a 到 f 的三对组合组成，等于 0 到 255 范围内的数字。前三位数字是红色、绿色和蓝色值，格式为 #RRGGBB。为了创建 Alpha 通道，添加了第四组，使模式 #RRGGBBAA。

要开始使用十六进制 Alpha 通道，请在文本编辑器中返回 styles.css。您现在将为模态框的标题和内容区域添加一个边框以赋予它更多定义。这些边框将使用相同的十六进制值，但会为 Alpha 通道赋予不同的值。以下代码块中突出显示的 CSS 显示了如何编写这些样式：

样式.css

...
.modal-header {
  display: flex;
  justify-content: space-between;
  background-color: hsla(300, 80%, 90%, 0.2);
  border-radius: 1.5rem 1.5rem 0 0;
  border: 4px solid #f7baf72f;
  border-bottom: none;
}
...
.modal-content {
  color: white;
  border-radius: 0 0 1.5rem 1.5rem;
  border: 4px solid #f7baf744;
  border-top: none;
}
...

标题和内容都具有与 #f7baf7 相同的十六进制颜色，但它们具有不同的 alpha 通道值。 modal-header 选择器的 border-color 有一个 alpha 通道设置为 2f，它更透明，因为 00 是一个完全透明的 alpha 通道值。 .modal-content 的 alpha 通道设置为 44，这使它更加不透明。

将更改保存到 styles.css 并在 Web 浏览器中刷新 index.html。下图说明了这些边框是如何在浏览器中呈现的：

最后，六位十六进制颜色可以写成三位速记，其中 #33ccee 与 #3ce 相同。同样，带有 alpha 通道的十六进制值可以写为四位速记，以便 #33ccee99 可以缩短为 #3ce9 并具有相同的颜色。

要开始使用带有 alpha 通道的速记十六进制，请在文本编辑器中返回 stlyes.css。然后，转到 .modal 类选择器并添加 box-shadow 属性。在这里，您将在模态框上创建一个大阴影，该阴影将是黑色的，但会被 Alpha 通道柔化。将以下代码块中突出显示的 CSS 添加到 .modal 选择器块：

样式.css

...
.modal {
  margin: auto;
  width: 90%;
  max-width: 40rem;
  background: linear-gradient(135deg, hsl(300, 40%, 20%),hsl(300, 40%, 5%));
  border-radius: 1.5rem;
  box-shadow: 0 1rem 2rem #000a;
}
...

此阴影沿 x 轴下降 1rem 并散布模糊 2rem。接下来，#000a 值通过关闭所有三个颜色值来定义全黑颜色。 a 等效于 aa，数值为 170，为 Alpha 通道提供大约 66% 的透明度。这会使阴影略微变暗，但使其足够大以提供模态下方的深度。

请务必将此添加保存到 styles.css，然后在浏览器中刷新 index.html。模态现在有更多的定义和深度。下图提供了具有各种颜色值的模态渲染：

在本节中，您使用 Alpha 通道的三种不同颜色值将不透明度应用于特定属性的颜色。您已将这些颜色添加到 background-color 属性、border 属性和 box-shadow 属性中。在下一节中，您将使用 transparent 的命名颜色值来创建独特的渐变并隐藏内容。

将 `transparent` 颜色值添加到 `linear-gradient`

支持 Alpha 通道的各种颜色值对于仍需要识别颜色时很有帮助。但是，当不需要颜色时，transparent 命名颜色变得有用。在本节中，您将隐藏模态中的 Close 按钮，并使用 linear-gradient() 创建一个 X 形状，所有这些都使用 [X147X ] 价值。

要开始使用 transparent 值，请在文本编辑器中打开 styles.css。然后，转到您之前添加的 .modal-close 类选择器。在选择器内，将 color 属性值从 white 更改为 transparent，如以下代码块中突出显示的那样：

样式.css

...
.modal-close {
  color: transparent;
}
...

此更改不会从空间中删除文本；它只会将其从页面上的视觉呈现中删除。

接下来，您将从关闭链接中创建一个正方形，以便创建 X 形状。首先添加一个 display 属性设置为 block，这使得 <a> 可以更直观地配置。接下来，创建一个 height 和 width 属性并将每个属性设置为 1.5rem，这将创建方形。最后，添加一个 overflow 属性设置为 hidden，这将防止文本超出容器并添加交互空间。以下代码块中突出显示的 CSS 显示了如何设置正方形：

样式.css

...
.modal-close {
  color: transparent;
  display: block;
  height: 1.5rem;
  width: 1.5rem;
  overflow: hidden;
}
...

最后一部分是使用由两个 linear-gradient() 值组成的多背景实例创建 X 形状。要进行设置，请添加以下代码块中突出显示的代码：

样式.css

...
.modal-close {
  color: transparent;
  display: block;
  height: 1.5rem;
  width: 1.5rem;
  overflow: hidden;
  background-image:
    linear-gradient(
      to top right,
      transparent 48%,
      white 48%,
      white 52%,
      transparent 52%
    ),
    linear-gradient(
      to top left,
      transparent 48%,
      white 48%,
      white 52%,
      transparent 52%
    );
}
...

关于这段代码，首先要注意的是 linear-gradient() 的不同部分在不同的行上，这样做是为了帮助使复杂的背景更易于理解和清晰。这个 CSS 仍然有效，并且不需要值与属性在同一行。接下来，transparent 和 white 的重复百分比值意味着没有渐变。相反，颜色会立即从 transparent 翻转到 white。最后，to the right 和 to the top 在 45 度角上形成两个重叠的渐变。

将此更改保存到 styles.css 并在 Web 浏览器中打开 index.html。选择 Read the Disclaimer! 按钮，模态现在将具有大而细的 X 形状，而不是关闭链接，如下图所示：

最后，需要 :hover 和 :focus 状态来帮助使 X 形状在作为交互中心时更加明显。为此，您将复制之前的渐变并调整位置以扩大实心 white 区域。

要为 X 创建交互状态，请在文本编辑器中返回 styles.css。在 .modal-close 类选择器之后，创建一个由 .modal-close:hover 和 .modal-close:focus 组成的新组选择器。然后，将 background-image 属性和值从 .modal-close 复制到新的选择器中。最后，将 48% 段减少到 46% 并将 52% 增加到 54%。

样式.css

...
.modal-close {
  ...
}

.modal-close:hover,
.modal-close:focus {
  background-image:
    linear-gradient(
      to top right,
      transparent 46%,
      white 46%,
      white 54%,
      transparent 54%
    ),
    linear-gradient(
      to top left,
      transparent 46%,
      white 46%,
      white 54%,
      transparent 54%
    );
}
...

将这些更改保存到 styles.css 并在浏览器中刷新页面。现在，当 X 悬停在键盘焦点上或给定键盘焦点时，创建形状的渐变大小将增加，从而产生 X 加粗的效果。以下动画演示了在悬停事件期间如何在浏览器中呈现此效果：

本节向您介绍了 transparent 属性，您使用它来隐藏内容并使用 linear-gradient() 值创建 X 图标。在最后一节中，您将在渐变上使用 transparent 值来帮助在按钮样式的元素上提供动画效果。

使用 `:hover` 状态在透明 `color` 值之间转换

transition 属性有时需要创造性解决方案的一个方面是并非所有属性都可以设置动画。这些属性之一是 background-image，这意味着该属性上的 linear-gradient 的值无法设置动画。但是，即使存在 background-image，background-color 值也可以设置动画。在本节中，您将使用 transparent 和 Alpha 通道颜色值创建一个看起来是渐变动画的过渡动画。

要创建动画渐变，请在文本编辑器中打开 styles.css。然后转到 .button 类选择器。 .button 类在其选择器和 .button:hover 之间的 background-color 中已经发生了变化。将以下代码块中突出显示的 transition 属性和值添加到您的 styles.css 文件中：

样式.css

...
.button { 
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 1.25rem;
  color: white;
  background: #4c90b2;
  border: 1px solid #2d566b;
  border-radius: 0.5rem;
  transition: background-color 250ms ease;
}

.button:hover,
.button:focus {
  background-color: #2d566b;
}
...

将更改保存到 styles.css 并在 Web 浏览器中打开 index.html。现在，用光标悬停按钮将使 background-color 在浅蓝色和深蓝色之间进行动画处理。以下动画显示了它是如何在浏览器中呈现的：

现在，要添加渐变，请在文本编辑器中返回 styles.css。返回到 .button 选择器并添加带有 linear-gradient() 的 background-image 属性。渐变的方向将是 to bottom，从 Alpha 通道浅蓝色开始，然后转到 transparent。动画将以深蓝色的 Alpha 通道结束。以下代码块中突出显示的 CSS 演示了如何编写此渐变：

样式.css

...
.button { 
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 1.25rem;
  color: white;
  background: #4c90b2;
  border: 1px solid #2d566b;
  border-radius: 0.5rem;
  background-image:
    linear-gradient(
      to bottom,
      hsla(200, 40%, 80%, 0.4),
      transparent,
      hsla(200, 40%, 20%, 0.6)
    );
  transition: background-color 250ms ease;
}
...

此渐变覆盖 background-color，呈现渐变从浅蓝色到中间蓝色再到深蓝色的外观。当按钮遇到交互事件时，background-color 变为深蓝色，产生整体渐变变暗的错觉。

将这些更新保存到 styles.css，然后在浏览器中返回到您的 index.html 文件并刷新页面。如以下动画所示，当光标悬停在按钮上时，渐变看起来会从浅蓝色渐变动画到深蓝色渐变：

在最后一节中，您使用了颜色值、transparent 命名值和 transition 属性来创建渐变动画的错觉。因此，您还了解了可以为哪些类型的属性设置动画。

结论

在本教程中，您使用了 opacity 属性和许多带有 Alpha 通道的颜色值。您将 opacity 与 pointer-events 和 transition 一起使用来创建淡入效果以按需显示模态。您还使用了各种可用的颜色值来控制内容上颜色的透明度和叠加。您使用 transparent 命名值创建了一个 X 图标来关闭模式。最后，您使用颜色、transparent 值、渐变和 transition 的组合在按钮上创建动画渐变的错觉。

在网页设计中使用 opacity 和透明颜色有很多有用的理由。 opacity 属性可用于在需要时可见的元素上设置淡入淡出效果的动画。允许透明度控制的各种颜色值提供了许多将颜色和内容混合在一起的方法。总之，这些创建透明度的方法可以创建许多独特的效果和样式。

如果您想阅读更多 CSS 教程，请尝试如何使用 CSS 设置 HTML 样式系列中的其他教程。

如何使用不透明度和透明度在CSS中创建模态

介绍

先决条件

设置基本 HTML 和 CSS

使用 opacity 创建 :target 状态以显示和隐藏元素

使用 Alpha 通道创建透明颜色值

将 transparent 颜色值添加到 linear-gradient

使用 :hover 状态在透明 color 值之间转换

结论

使用 `opacity` 创建 `:target` 状态以显示和隐藏元素

将 `transparent` 颜色值添加到 `linear-gradient`

使用 `:hover` 状态在透明 `color` 值之间转换