CSS掩藏网页页面元素的5种方式

日期:2021-03-03 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

用 CSS 掩藏网页页面元素有很多种方式。你能够将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或将 position 设为 absolute 随后将部位设到不能见地区。

你有木有想过,为何大家要有这么多技术性来掩藏元素,而它们看起来都完成的是一样的实际效果?每种方式具体上与别的方式之间都有1些微小的不一样,这些不一样决策了在1个特殊的场所下应用哪个方式。这篇实例教程将遮盖到那些你必须记牢的细微不一样点,让你依据不一样状况挑选上面这些方式中合适的方式来掩藏元素。

Opacity

opacity 特性的意思是设定1个元素的全透明度。它并不是为更改元素的界限框(bounding box)而设计方案的。这代表着将 opacity 设为 0 只能从视觉效果上掩藏元素。而元素自身仍然占有它自身的部位并对网页页面的合理布局起功效。它也将回应客户互动。

.hide {
  opacity: 0;
}

假如你准备应用 opacity 特性在读屏手机软件中掩藏元素,很悲剧,你其实不能如愿以偿。元素和它全部的內容会被读屏手机软件阅读文章,就像网页页面上的别的元素那样。换句话说,元素的个人行为就和它们不全透明时1致。

我还要提示1句,opacity 特性能够用来完成1些实际效果很棒的动漫。任何 opacity 特性值小于 1 的元素也会建立1个新的层叠左右文(stacking context)。

当你的电脑鼠标移到被掩藏的第 2 个的区块上,元素情况光滑地从彻底全透明过渡到彻底不全透明。区块也将 cursor 特性设定以便 pointer,这表明了客户能够与它互动。

Visibility

第2个要说的特性是 visibility。将它的值设为 hidden 将掩藏大家的元素。好似 opacity 特性,被掩藏的元素仍然会对大家的网页页面合理布局起功效。与 opacity 唯1不一样的是它不容易回应任何客户互动。另外,元素在读屏手机软件中也会被掩藏。

这个特性也可以完成动漫实际效果,要是它的原始和完毕情况不1样。这保证了 visibility 情况切换之间的过渡动漫能够是時间光滑的(客观事实上能够用这1点来用 hidden 完成元素的延迟时间显示信息和掩藏——译者注)。

.hide {
   visibility: hidden;
}

留意,假如1个元素的 visibility 被设定为 hidden,另外要想显示信息它的某个子孙后代元素,要是将那个元素的 visibility 显式设定为 visible 便可(就如事例里边的 .o-hide p——译者注)。尝试只 hover 在掩藏元素上,不必 hover 在 p 标识里的数据上,你会发现你的电脑鼠标光标沒有变为手指头的模样。此时,你点一下电脑鼠标,你的 click 恶性事件也不容易被开启。

而在 <div> 标识里边的 <p> 标识则仍然能够捕捉全部的电脑鼠标恶性事件。1旦你的电脑鼠标挪动到文本上,<div> 自身变得可见而且恶性事件申请注册也随之起效。

Display

display 特性按照词意真实掩藏元素。将 display 特性设为 none 保证元素不能见而且连盒实体模型也不转化成。应用这个特性,被掩藏的元素不占有任何室内空间。不但这般,1旦 display 设为 none 任何对该元素立即打客户互动实际操作都不能能起效。另外,读屏手机软件也不容易读到元素的內容。这类方法造成的实际效果就像元素彻底不存在。

任何这个元素的子孙后代元素也会被另外掩藏。为这个特性加上过渡动漫是失效的,它的任为何不同情况值之间的切换一直会马上起效。

但是请留意,根据 DOM 仍然能够浏览到这个元素。因而你能够根据 DOM 来实际操作它,就像实际操作别的的元素。

.hide {
   display: none;
}

你将看到第2个块元素内有1个 <p> 元素,它自身的 display 特性被设定成 block,可是它仍然不能见。这是 visibility:hidden 和 display:none 的另外一个不一样的地方。在前1个事例里,将任何子孙后代元素 visibility 显式设定成 visible 可让它变得可见,可是 display 不要吃这1套,无论本身的 display 值是甚么,要是先祖元素的 display 是 none,它们就都不能见。

如今,将电脑鼠标移到第1个块元素上面几回,随后点一下它。这个实际操作将让第2个块元素呈现出来,它在其中的数据将是1个超过 0 的数。这是由于,元素即便被这样设定成对客户掩藏,還是能够根据 JavaScript 来开展实际操作。

Position

假定有1个元素你要想与它互动,可是你又不想让它危害你的网页页面合理布局,沒有适合的特性能够解决这类状况(opacity 和 visibility 危害合理布局, display 不危害合理布局但又没法立即互动——译者注)。在这类状况下,你只能考虑到将元素移出可视性地区。这个方法既不容易危害合理布局,有能让元素维持能够实际操作。下面是选用这类方法的 CSS:

.hide {
   position: absolute;
   top: ⑼999px;
   left: ⑼999px;
}

这类方式的关键基本原理是根据将元素的 top 和 left 设定成充足大的负数,使它在显示屏上不能见。选用这个技术性的1个益处(或潜伏的缺陷)是用它掩藏的元素的內容能够被读屏手机软件载入。这彻底能够了解,是由于你只是将元素移到可视性地区外面让客户没法看到它。

你得防止应用这个方式去掩藏任何能够得到聚焦点的元素,由于假如那末做,当客户让那个元素得到聚焦点时,会致使1个不能意料的聚焦点切换。这个方式在建立自定复选框和单选按钮时常常被应用。(用 DOM 仿真模拟复选框和单选按钮,但用这个方式掩藏真实的 checkbox 和 radio 元向来“接受”聚焦点切换——译者注)

Clip-path

掩藏元素的另外一种方式是根据裁剪它们来完成。在之前,这能够根据 clip 特性来完成,可是这个特性被废料了,换为1个更好的特性叫做 clip-path。Nitish Kumar 近期在 SitePoint 发布了“详细介绍 clicp-path 特性”这篇文章内容,根据阅读文章它能够掌握这个特性的更多高級用法。

记牢,clip-path 特性都还没在 IE 或 Edge 下被彻底适用。假如要在你的 clip-path 中应用外界的 SVG 文档,访问器适用度还要更低。应用 clip-path 特性来掩藏元素的编码看起来以下:

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

假如你把电脑鼠标悬停在第1个元素上,它仍然能够危害第2个元素,虽然第2个元素早已根据 clip-path 掩藏了。假如你点一下它,它会移除用来掩藏的 class,让大家的元素从那个部位呈现出来。被掩藏元素中的文本依然可以根据读屏手机软件载入,很多 WordPress 站点应用 clip-path 或以前的 clip 来完成专业为读屏手机软件出示的文本。

尽管大家的元素本身已不显示信息,它也仍然占有本该占有的矩形框尺寸,它周边的元素的个人行为就好似它可见时1样。记牢客户互动比如电脑鼠标悬停或点一下在裁剪地区以外也不能能起效。在大家的事例里,裁剪区尺寸为零,这代表着客户将不可以与掩藏的元素立即互动。另外,这个特性可以应用各种各样过渡动漫来完成不一样的实际效果。

结果

在这篇实例教程里,大家看了 5 种不一样的根据 CSS 掩藏元素的方式。每种方式都与别的几种有1点差别。了解你要想完成甚么有助于你决策选用哪个特性,伴随着時间推移,你就可以依据具体要求本能反应地挑选最好方法了。

本文转载自:众成汉语翻译
译者:10年足迹
连接:http://www.zcfy.cc/article/457
原文:https://www.sitepoint.com/five-ways-to-hide-elements-in-css/

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:css合理布局实体模型全面掌握 返回下一篇:没有了