当前位置: 首页 > java >正文

CSS opacity

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

核心作用

  1. 控制透明度:让元素完全可见、部分透明或完全隐藏。
  2. 创建视觉层次:通过透明度差异突出重要内容。
  3. 实现过渡动画:与 transition 结合,实现平滑的淡入淡出效果。
    <!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>

http://www.xdnf.cn/news/5063.html

相关文章:

  • 已解决:安卓刚打开新项目的时候,会下载该项目要求的sdk gradle,开了科学上网也慢
  • C++学习-入门到精通-【5】类模板array和vector、异常捕获
  • B树和B+树
  • xxl-job的pg数据库改造适配
  • TiDB预研-分页查询、连接查询、执行计划
  • yolov5基础--yolov5源码阅读(common.py)
  • LeRobot 项目部署运行逻辑(六)——visualize_dataset_html.py/visualize_dataset.py
  • 4-37:某单位分配到一个地址块 136.23.12.64/26。现在需要进一步划分为4个一样大的子网。试问:....
  • 全局异常未能正确捕获到对应的异常
  • shell脚本基础详细学习(更新中)
  • 资产月报怎么填?资产月报填报指南
  • 半导体供应链集成使用EDI,RosettaNet,及自定义API 之间的差异
  • 【Light】帕多瓦大学超表面技术:开启矢量光束相位偏振定制新时代
  • (pnpm)引入 其他依赖失败,例如‘@element-plus/icons-vue‘失败
  • 如何保证Session的一致性
  • temu采购自养号全流程解析:从账号搭建到安全下单的技术闭环
  • lvm详细笔记
  • 【AI论文】ZeroSearch:在不搜索的情况下激励LLM的搜索能力
  • 前端学习(1)—— 使用HTML编写一个简单的个人简历展示页面
  • VBA -- 学习Day4
  • 软件安全(二)优化shellcode
  • 使用React实现调起系统相机功能
  • 2025.05.07-淘天研发岗-第二题
  • goFrame框架中如何实现文件的excel导出
  • Spring Boot快速开发:从零开始搭建一个企业级应用
  • 普通IT的股票交易成长史--20250509 缺口(1)
  • LeetCode难题解析:数字字符串的平衡排列数目
  • 阻焊工艺如何保障多层PCB可靠性?5大核心功能与工艺控制要点
  • 深入理解 Istio 的工作原理 v1.26.0
  • 计算机网络:深度解析基于链路状态的内部网关协议IS-IS