CSS opacity

opacity 是一个 CSS 属性,用于控制元素的透明度。通过调整透明度,可以实现元素的半透明效果、渐变显示 / 隐藏动画,以及创建视觉层次感。下面详细介绍其用法和作用。

核心作用

  1. 控制透明度:让元素完全可见、部分透明或完全隐藏。

  2. 创建视觉层次:通过透明度差异突出重要内容。

  3. 实现过渡动画 :与 transition 结合,实现平滑的淡入淡出效果。

    html 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>透明度</title>
      <style>
    
        img {
          opacity: 0.5;
          transition: opacity 0.3s ease; /* 添加过渡动画 */
        }
        img:hover {
          opacity: 1;
        }
      </style>
    </head>
    <body>
      
        <img src="./images/phone.png" alt="">
      
    </body>
    </html>

相关推荐
Carlos_sam24 分钟前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85035 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏1 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架