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

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

ds 2025/5/18 8:32:54

HTML元素隐藏的四个方法

1、display设置为none

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

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

2、visibility设置为hidden

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

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

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

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

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

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

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

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

在这里插入图片描述

在这里插入图片描述

5、rgba和opacity的效果对比

在这里插入图片描述

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

相关文章：

  • 软件设计师教程—— 第二章 程序设计语言基础知识（上）
  • Spatial Transformer Layer
  • Vue3学习（组合式API——ref模版引用与defineExpose编译宏函数）
  • 信贷域——互联网金融业务
  • 低空经济发展现状与前景
  • 聚集索引 vs. 非聚集索引
  • 恒大歌舞团全集
  • Android 14 解决打开app出现不兼容弹窗的问题
  • 参考工具/网站
  • scss additionalData Can‘t find stylesheet to import
  • 强化学习入门：马尔科夫奖励过程二
  • 什么是API接口？API接口的核心价值
  • 网关GateWay——连接不同网络的关键设备
  • STM32IIC实战-OLED模板
  • TC3xx学习笔记-UCB BMHD使用详解(二)
  • 使用NVM管理node版本
  • GO语言学习（二）
  • CSS 浮动与定位以及定位中z-index的堆叠问题
  • 设计练习 - Movie Review Aggregator System
  • 探秘Transformer系列之（33）--- DeepSeek MTP
  • 【爬虫】DrissionPage-6
  • MapReduce 原理深度剖析：从任务执行到参数配置
  • AI编码代理的崛起 - AlphaEvolve与Codex的对比分析引言
  • 61. 旋转链表
  • 理解 plank 自动生成的 copyWithBlock: 方法
  • C++（初阶）（十八）——AVL树
  • 深入解析：如何基于开源OpENer开发EtherNet/IP从站服务
  • 深入浅出IIC协议 - 从总线原理到FPGA实战开发 -- 第一篇：I2C总线协议深度解剖
  • 广和通L610模块通过AT指令访问服务器方案：嵌赛使用
  • 蓝桥杯-不完整的算式