当前位置： 首页 > news >正文

【前端基础】HTML元素隐藏的四个方法（display设置为none、visibikity设置为hidden、rgba设置颜色、opacity设置透明度）

news 来源：原创 2025/5/18 5:58:50

HTML元素隐藏的四个方法

1、display设置为none

  • 元素不显示出来。
  • 不占位置，也没有任何空间。就不存在一样。

在这里插入图片描述
在这里插入图片描述

2、visibility设置为hidden

  • 默认：visible。元素可见
  • 设置为hidden：元素不可见，但是会占据这个元素应该占用的空间。

在这里插入图片描述
在这里插入图片描述

3、rgba设置颜色，将a的值设置为0

  • rgba的a设置的是alpha值，可以设置透明度，不影响子元素。

图片就很明显，没有改变透明度。
在这里插入图片描述

这就是隐藏的效果：不影响子元素。
在这里插入图片描述

4、opacity设置透明度，设置为0

  • 设置整个元素的透明度，会影响所有的子元素。

在这里插入图片描述

在这里插入图片描述

5、rgba和opacity的效果对比

在这里插入图片描述

相关文章：

  • DeepSeek 赋能社会科学：解锁研究新范式
  • 现在市面上三大常用的拓客软件好用吗？
  • 机器学习，深度学习，神经网络，深度神经网络之间有何区别？
  • PostgreSQL内幕剖析——结构与架构
  • C++类与对象--1 特性一：封装
  • 深入浅出IIC协议 - 从总线原理到FPGA实战开发 -- 第一篇：I2C总线协议深度解剖
  • CentOS 下 FTP 与 NFS 服务深度解析：从基础配置到实战应用
  • 深度学习推理引擎---OpenVINO
  • Android核心系统服务：AMS、WMS、PMS 与 system_server 进程解析
  • 如何在纷杂的环境当中保持保持独立思考能力？
  • linux c++头文件生成源文件 使用python脚本 配置vim快捷键
  • Unity3D仿星露谷物语开发44之收集农作物
  • OAuth2.0
  • 6to4、6over4的类比解释
  • 使用tensorRT10部署低光照补偿模型
  • MySQL相关
  • [强化学习的数学原理—赵世钰老师]学习笔记02-贝尔曼方程
  • 支持selenium的chrome driver更新到136.0.7103.94
  • 【2025年软考中级】第一章1.6 安全性、可靠性、性能评价
  • Python爬虫实战：获取1688商品信息
  • 新疆多地市民拍到不明飞行物：几秒内加速消失，气象部门回应
  • 媒体评欧阳娜娜遭民进党当局威胁：艺人表达国家认同是民族大义
  • “16+8”“生酮饮食”，网红减肥法究竟靠谱吗？
  • 自然资源部：不动产登记累计化解遗留问题房屋2000多万套
  • 新华时评：让医德医风建设为健康中国护航
  • 商务部：中方将适时发布中美经贸磋商相关消息