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

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


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

一、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> 元素内添加了一些文本。

小结

透明度+不透明度=1。

相关文章
|
19天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
101 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
17天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
44 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
15天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
59 34
|
19天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
67 33
|
18天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
28 2
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
114 24
|
2月前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
55 3
|
3月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
79 5
|
9月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
134 0
|
Web App开发 编解码 前端开发
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
165 0
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?