CSS隐藏HTML元素的四种常用方法

1.opacity：设置opacity: 0可以使一个元素变得完全透明。

设置的透明度会被子元素继承，而且无法取消。

通常可以使用opacity属性来制作元素的淡入淡出效果。

设置opacity:1可以使透明元素变得可见。

2.visibility： 是许多人在隐藏某个HTML元素时的首选。

visibility:hidden视觉上看不见，但它所占据空间的位置仍然存在。

3.display:none它是position:absolute和visibility: hidden;的折中方法。

设置该属性后，该对象会在页面上彻底消失,并且不会再占用文档的空间。

将元素设置为display: block或其它值可以使元素再次可见。

4.transparent:用于background-color：transparent；单纯的把背静或者border属性变成透明色，对子元素不会影响。

*其中我们需要注意opacity它是适用除IE浏览器以外的所有浏览器。

filter:Alpha(opacity=50)是针对IE浏览器所用的透明属性。

设置opacity: 0可以使一个元素变得完全透明

使用CSS隐藏HTML元素的四种常用方法的更多相关文章

  1. 使用CSS隐藏HTML元素的4种常用方法

    现在的网页设计越来越动态化,我们经常需要隐藏某些元素,在特定的时候才显示它们.我们通常可以使用4种方法来隐藏和显示元素. 这4种显示和隐藏元素的技术各自有它们自己的优点的缺点,下面来举例说明. 在这篇 ...

  2. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

  3. CSS 隐藏页面元素的 几 种方法总结

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...

  4. 用CSS隐藏页面元素的5种方法

    1.opacity设置一个元素的透明度只是从视觉上隐藏元素,对页面布局还是有影响,读屏软件会原样读出 2.visibility设置为hidden将隐藏我们的元素,对网页布局还是起作用,子元素也会被隐藏 ...

  5. css隐藏页面元素的方法

    用css隐藏页面元素有许多种方法. 第一种方法[opacity: 0;] opacity属性通常用于设置一个元素的透明度,从另一个角度来看,如果透明度为0,也就从视觉上隐藏了该元素. 这个属性不是为改 ...

  6. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  7. Struts2中访问web元素的四种方式

    Struts2中访问web元素的四种方式如下: 通过ActionContext来访问Map类型的request.session.application对象. 通过实现RequestAware.Sess ...

  8. HTML中引入CSS的四种常用方法及各自的缺点

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用.格式如下: ...

  9. PHP从数组中删除元素的四种方法实例

    PHP从数组中删除元素的四种方法实例 一.总结 一句话总结:unset(),array_splice(),array_diff(),array_diff_key() 二.PHP从数组中删除元素的四种方 ...

随机推荐

  1. nodejs卸载安装

    作为新手nodejs卸载后安装就总出错,今天记录了详细的步骤: 参考一下网址:写的很详细https://jingyan.baidu.com/article/48b37f8dd141b41a646488 ...

  2. 阿里云短信验证~JAVA后台

    maven :中的 pom.xml添加 <dependency> <groupId>com.aliyun</groupId> <artifactId>a ...

  3. Brackets - 前端神器

    做了几年的 .Net 项目开发,后来公司转 Java 语言开发,Java 做了还没一年,公司准备前后端分离开发,而我被分到前端! Brackets是一款基于web(html+css+js)开发的web ...

  4. [转]WinForm下Splash(启动画面)制作

    本文转自:http://www.smartgz.com/blog/Article/1088.asp 原文如下: 本代码可以依据主程序加载进度来显示Splash. static class Progra ...

  5. python数据类型和数据运算

    数字 整型 包括正整数和负整数,和数学的表示方法一样.如:1.100.8008.-12等. 浮点型 浮点数字也称为小数,如果按照科学计数法表示时,小数点的位置是可变的.如:1.23x109==12.3 ...

  6. ansible使用5-Variables

    变量命名 支持数字.字母.下划线 有效:foo_port, foo5 无效:foo-port, foo port, foo.port, 12 playbook定义 - hosts: webserver ...

  7. python3绘图示例5（基于matplotlib：正弦图等）

    #!/usr/bin/env python# -*- coding:utf-8 -*- import numpy as npimport pylab as pyimport matplotlib as ...

  8. Python基础学习之序列（1）

    序列 序列类型有着相同的访问模式:它的每一个元素可以通过指定一个偏移量的方式得到.而多个元素可以通过切片操作的方式一次得到,下标偏移量是从0开始到总元素-1结束,之所以要减1是因为我们是从0开始计数的 ...

  9. MATLAB/OCTAVE常用命令 cheat sheet

    MATLAB cheatsheet http://web.mit.edu/18.06/www/Spring09/matlab-cheatsheet.pdf 清除变量 clear 清屏 clc //cl ...

  10. frame、window和dialog区别

    属性 Window Frame Dialog 模式化 不是 不是 不是(可设置) 可调大小 不可 可 可 标题栏 无 有 有 边界 无 有 有 标题 无 有 有 菜单栏 无 有 无 焦点管理器 有 有 ...