编程笔记 html5cssjs 056 CSS不透明度

news2024/10/3 10:35:15

编程笔记 html5&css&js 056 CSS不透明度

一、CSS 不透明度 / 透明度
二、使用 RGBA 的透明度
三、透明盒中的文本
小结

不透明度/透明度。利用透明度可以提高页面的层次效果。

一、CSS 不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。
opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读：

div {
  opacity: 0.3;
}

二、使用 RGBA 的透明度

如果您不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：
RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

div {
  background: rgba(76, 175, 80, 0.4) /* 不透明度为 40% 的绿色背景 */
}

三、透明盒中的文本

这是一些位于透明框中的文本。

<!DOCTYPE html>
<html lang="zh-cn">
   <head>
      <title>编程笔记 html5&css&js 第一个页面</title>
      <meta charset="utf-8" />
      <style>
         /* 选择你喜欢的颜色吧 */
         body {
            color: cyan;
            background-color: teal;
         }
         .child {
            margin: auto;
         }
         div.background {
            background: url(images/029-1.png) repeat;
            border: 2px solid black;
         }

         div.transbox {
            margin: 30px;
            background-color: #ffffff;
            border: 1px solid black;
            opacity: 0.6;
         }

         div.transbox p {
            margin: 5%;
            font-weight: bold;
            color: #000000;
         }
         p {
            text-align: center;
         }
      </style>
   </head>
   <body>
      <div class="background">
         <div class="transbox">
            <p>
               《青少年成长管理》，本人原创系列文章。
               成长工程、成长要素、成长目标、成长资源、专业选择、成长导师、时间管理、学习方法、
               常见问题、成长计划、项目计划、任务计划、计划执行、考核评价、调整改进、走进社会、
               改变世界、成就人生。
            </p>
         </div>
      </div>
   </body>
</html>

在这里插入图片描述

首先，我们创建一个带有背景图像和边框的 <div> 元素（class="background"）。
然后，我们在第一个 <div> 中创建另一个 <div>（class="transbox"）。
<div class="transbox"> 有背景色和边框 - 这个 div 是透明的。
在透明的 <div> 内，我们在 <p> 元素内添加了一些文本。