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

作者选择了多样性在技术基金作为写给捐款计划的一部分接受捐款。

介绍

当使用 CSS 进行 HTML 格式化时,有多种方式来调整元素的不透明度,以及在设计中使用这种效果的多种原因。不透明度可以帮助软化阴影,在特定任务中脱颖而出非必不可少的内容,或者在视图中或外部模糊内容。

在本教程中,您将使用各种方法来应用不透明度和额外的属性,以有效实现某些效果。您将创建一种模式,使用:target假类类类和opacity,pointer-events和transition属性来显示非JavaScript的方法。然后,您将使用Alpha频道的每个颜色值来创建阴影,边界和内容叠加。您还将使用透明颜色值来帮助在:hover事件中创建动画色彩。

前提条件

联合国了解 CSS 的级联和特异性,您可以通过读取[如何将 CSS 样式应用到 HTML 并带有连带和特异性] (https://andsky.com/tech/tutorials/how-to-apply-css-styles-to-html-with-cascade-and-specificity) 。
了解类型选择器、组合选择器和选择器组, 您可以在 [How To Seting HTML Elements to Style with CSS] (https://andsky.com/tech/tutorials/how-to-select-html-elements-to-style-with-css) 中找到。
对`颜色'属性的理解。参见 [如何使用带有 CSS (https://andsky.com/tech/tutorials/how-to-use-color-values-with-css "How To Use Color Values with CSS") 的色彩值,以学习更多使用 CSS 的色彩工作.
具有 " 背景 " 属性的CSS梯度知识。检查 [如何将背景样式应用到带有 CSS 的 HTML 元素 (https://andsky.com/tech/tutorials/how-to-apply-background-styles-to-html-elements-with-css) 以获取创建梯度背景的经验。
`box-shadow' 属性的经验, 您可以在 [如何将 HTML 元素的边缘与边框、阴影和 CSS 的大纲样式化 (https://andsky.com/tech/tutorials/how-to-style-html-elements-with-borders-shadows-and-outlines-in-css] ) 中了解更多情况。
在本地机器上保存的空 HTML 文件为index.html , 您可以从您选择的文本编辑器和网页浏览器中访问。要启动, 请检查如何设置 HTML 工程 ([ LINK5] ) 教程, 并遵循 [如何使用和理解 HTML 元素] ([ LINK6] ) , 以了解如何在浏览器中查看 HTML 的指示。如果您是新到的 HTML, 请尝试整个 [如何在 HTML (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html) 序列中构建一个网站。 (英语)

建立基本的HTML和CSS

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

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

 1[label index.html]
 2<!doctype html>
 3<html>
 4  <head>
 5    <meta charset="utf-8" />
 6    <title>Destination: Moon</title>
 7    <link rel="preconnect" href="https://fonts.googleapis.com"> 
 8    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
 9    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700&display=swap" rel="stylesheet">
10    <link href="styles.css" rel="stylesheet" />
11  </head>
12  <body>
13  </body>
14</html>

几个页面设置被定义在HTML的<head>元素中。<meta>元素定义了文本中使用的字符集,该元素告诉浏览器如何在代码中解释特殊字符而不使用HTML字符代码。<title>元素为浏览器提供页面的标题。<link>元素在页面风格中加载。首三个字体加载,Museo Moderno,来自 Google Fonts,最后一个则加载你将添加到styles.css的风格。

接下来,页面将需要内容为风格. 您将使用来自 Sagan Ipsum的样本内容作为用来使用风格的填写副本. 您还将应用 HTML 用于网站标题,其中包含网站名称和一个小导航栏。在文本编辑器中返回 index.html,并从以下代码块中添加突出的 HTML:

 1[label index.html]
 2<!doctype html>
 3<html>
 4  <head>
 5    ...
 6  </head>
 7  <body>
 8    <header class="site-header">
 9      <h1 class="site-name">Destination: <strong>Moon</strong></h1>
10      <nav>
11        <ul class="nav-list">
12          <li><a href="#" class="nav-link">Base Station</a></li>
13          <li><a href="#" class="nav-link">Travel Packages</a></li>
14          <li><a href="#" class="nav-link">Accommodations</a></li>
15          <li><a href="#" class="nav-link">Plan Your Trip</a></li>
16      </ul>
17      </nav>
18    </header>
19    <main>
20      <section>
21        <h2>Schedule Your Trip</h2>
22        <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>
23        <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>
24          <a href="#" class="button">Read the Disclaimer!</a>
25      </section>
26    </main>
27  </body>
28</html>

请务必保存你的 index.html 文件,然后在文本编辑器中打开它,然后在文本编辑器中创建一个名为 styles.css 的新文件,然后在文本编辑器中打开它。

 1[label styles.css]
 2body {
 3  margin: 0;
 4  font: 100%/1.5 sans-serif;
 5}
 6
 7main {
 8  margin: 6rem auto;
 9  width: 75ch;
10  font-size: 1.125rem;
11}
12
13h2 {
14  font: 400 1.875rem/1.25 MuseoModerno, sans-serif;
15  color: #6b2d6b;
16}
17
18.site-header {
19  font: 1.125rem / 1.25 MuseoModerno, sans-serif;
20  display: flex;
21  align-items: center;
22  justify-content: space-between;
23  padding: 0 2rem;
24  color: white;
25  background: linear-gradient(135deg, #8e3d8e, #230f23);
26}
27
28.site-name {
29  margin: 0;
30  font-size: 1.75rem;
31  font-weight: 400;
32}
33
34.nav-list {
35  margin: 0;
36  padding: 0;
37  list-style: none;
38  display: flex;
39  align-items: stretch;
40}
41
42.nav-link {
43  color: inherit;
44  display: block;
45  text-decoration: none;
46  padding: 1.25rem 1.5rem;
47}
48
49.nav-link:hover,
50.nav-link:focus {
51  color: #230f23;
52  background-color: white;
53}
54
55.button {
56  text-decoration: none;
57  display: inline-block;
58  padding: 0.5rem 1.25rem;
59  color: white;
60  background: #4c90b2;
61  border: 1px solid #2d566b;
62  border-radius: 0.5rem;
63}
64
65.button:hover,
66.button:focus {
67  background-color: #2d566b;
68}

这些风格设置了页面的一般美观和布局,应用于体和主元素的风格。.site-header,.site-name,.nav-list和.nav-link选项都定义了页面标题上的风格。

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

Sample website with a purple nav bar, a centered block of copy text, and a blue button with the words "Read the Disclaimer!"

到目前为止,您所编写的 CSS 会创建页面顶部的紫色标题,具有网站标题和白文本导航。下方,内容由紫色标题和两段文本组成。内容的宽度被限制在 75 个字符中,其属性值为最大宽度:76ch在主要元素选择器上。

在整个本节中,你将设置你的HTML在index.html文件中,并在styles.css文件中创建基本风格。

创建`:target`状态以`不透明度`显示和隐藏元素

一个有用的应用程序的不透明度属性是导致内容在屏幕上消失。这样的效果的一个例子是,当一个 modal,一个用户界面元素(也称为 light box)出现在你的页面的其他内容前面,转移到视图,你可以创建这个效果与不透明度和指针事件属性和:目标假类类的组合。

開始開啟「index.html」來創建模式的內容. 從下列代碼塊中,在「」和「

1[label index.html] 2<!doctype html> 3<html> 4 <head> 5 ... 6 </head> 7 <body> 8 ... 9 <main> 10 <section> 11 ... 12 </section> 13 <div class="modal-container"> 14 <section class="modal"> 15 <header class="modal-header"> 16 <h2 class="modal-title">Destination: Moon Disclaimer</h2> 17 <a href="#" class="modal-close">Close</a> 18 </header> 19 <div class="modal-content"> 20 <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> 21 </div> 22 </section> 23 </div> 24 </main> 25 </body> 26</html>

1[label styles.css] 2... 3 4.button:hover { 5 background-color: #2d566b; 6} 7 8.modal-container { 9 position: fixed; 10 top: 0; 11 right: 0; 12 bottom: 0; 13 left: 0; 14 z-index: 1000; 15 background-color: black; 16 display: flex; 17} 18 19.modal { 20 margin: auto; 21 width: 90%; 22 max-width: 40rem; 23 background-color: white; 24 border-radius: 1.5rem; 25} 26 27.modal-header, 28.modal-content { 29 padding: 1.5rem; 30}

1[label styles.css] 2... 3.modal-container { 4 position: fixed; 5 top: 0; 6 right: 0; 7 bottom: 0; 8 left: 0; 9 z-index: 1000; 10 background-color: black; 11 display: flex; 12 opacity: 0; 13} 14...