CSS Overlay技巧

时间  2019-11-14
标签 css overlay 技巧 栏目 CSS 繁體版
原文   原文链接

建立遮照图有几种技术：从使用绝对定位的元素到outline和伪元素。在本文中，咱们将探索每一个技术的实现样式以及他们之间的利与弊。css

CSS3 Transform——transform-origin

设计模式一般是一组最佳实践和技术，主要目的是用来解决一些最多见的设计“问题”，一般是在上下文中提出的设计原则。这些原则之是一“停留在页面”的原则。这一原则是创建在页面刷新都打破用户的心中想要的流程基础上，形成所谓的“变盲”，咱们须要用户不管保时何地能够避免打破这种视觉流程。html

咱们能够在保留用户在网页和模型的过程当中作出明智的选择。一个方式，让用户在同一页面上试图让内容在当前页面的背景下，经过展现一个“迷你页面”，或一个弹出的对话框。这个轻量级的层就是咱们所说的一个“浮层”。html5

轻量级的浮层图能够用来问问题，得到输入，引入特征，包括流程，给予指示，或展现信息。他们能够直接由用户激活事件(如，点击一个动做，悬浮事件)或由Web应用程序在不一样的阶段完成一个动做——Designing Web Interfacescss3

当用户交互只接受在弹出窗、灯箱广告效果的应用和其余的页面，显示会变得暗下来。git

本教程的目的是向你介绍向个方法，使用CSS建立黯淡的叠加效果，复习他们的技术，并肯定各自的优缺点。github

技巧1：绝对定位的元素

第一种方法，使用页面上的HTML元素的绝对定位来建立浮层叠加效果。在模板中使用一个空的div标记，使用CSS的绝对定位给这个div指定一个高的z-index值，确保这个空的div保持在页面其余元素的顶部，除了叠加在这个层上面的弹出窗口，须要设置一个更高的z-index值。web

<html>     <body>         <div class="overlay"></div>         <!--...-->     <body> <html>

假如咱们给一个空的div标签添加一个.overlay类名，使用CSS定位，将这个层叠加在页面上面：设计模式

html, body{ min-height: 100%; } body{ position: relative; } .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(0,0,0,0.5); /*暗淡的背景*/ }

代码很简单，使用这种技术有几件事须要注意。浏览器

首先，你须要确保浮层的绝对定位是相对于body。所以，若是浮层包含在另外一个div中，并且这个div设置了相对定位，那么叠加定位是相对于其容器，而不是页面的body。因此，你要么让这个覆盖层是body的子元素，或者确保它的全部祖先元素没有设置为relative。app

同进，你须要确保你的页面内容扩展到窗口底部或更多，由于body的扩展以适应其内容的高度(假设内容不是绝对)，若是没有足够的内容来扩大body的高度到窗口的底部。这个时候须要将浮层的高度设置为body高度的100%，否则达不到视窗的底部，也没法覆盖它。

为了不这种状况，不提心页面上的内容数量，仍然须要一个和视窗大小的叠加层，你须要设置一个相关于html和body的高度。

若是你给html元素设置了100%高度(100%高度是相对于视窗高度)，同时给body设置一个100%高度(相对于html元素)，此时两个元素的高度都是相对于视窗的100%，视窗不管有多深的内容，他们的高度仍然沿着内容高度延伸，等同于视窗高度，因此浮层的高度也同样。

在这种状况下，若是你向下滚动页面，叠加层也将滚动起来，你会看到它下面的内容没有覆盖，也就是说覆盖被切断。

解决文案是给html元素和body元素设置一个最小高度，在大多数状况下是可取的。经过设置一个最小高度，你会确保他们的高度达到视窗的底部，并随着内容增长而增长。最后，要使浮层的高度增长，让他随内容滚动覆盖整个页面内容，你必须在body上设置一个position:relative，让浮层的高度扩展到body的高度。

另外一件事情要注意，这种技术不须要给z-index设置一个很高的值。当他们位置重叠，或页面上元素在另外一个元素之上，不少开发人员倾向于给z-index设置一个很是高的值，如z-index:999999。这是没有必要的。大得多状况之下，给z-index设置值为10,有时甚至更少，就足够让一个元素在其余元素之上。你只须要知道，若是其余元素指定了z-index值，你要将浮层的z-index值设置高于其余元素。

最后，你还须要记得，在这种技术中，你须要添加一个空的div标记，固然这样是没有语义的。

使用这种技术的优点是，它支持全部主要的浏览器，和其余老浏览器，到IE8。

我已经创建了一个JSBin，因此你能够在这里测试你的结果。尝试将html和body元素min-height换成height，或删除body中的relative，看看当你滚动的时候浮层如何被切断。

技巧2：固定定位元素

第二种方法你能够添加一个很是相似于前一种方法的覆盖层，并在结构中使用相同的.overlay元素，但相反的定位浮层是绝对定位，你给它一个固定的位置和一个完整的宽度和高度来覆盖整个视窗。而且因为本例中的浮层是固定的，不管你怎么滚动，浮层是固定住的，覆盖了整个窗口的区域。这也是咱们想要的东西。

.overlay { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: rgba(0,0,0,0.5); }

不像绝对定位的元素，相对于设置了position:relative的容器，而固定定位是相对于视窗：

设置了position:absolute的元素的位置和大小是相对于包含块的位置和尺寸；设置了position:fixed的元素的位置和大小是相对于最初的包含块。这一般是视窗：浏览器窗口或页面的框。——W3C Wiki

一般，当使用固定定位，你没必要担忧浮层的div在结构中放置在哪里。不管你把它放在哪里，都会获得一个相对于视窗的固定位置，除非你改变浮动的祖先元素，在这种状况下，转换元素包含了为全部后代元素定位的包含块，即便是那些获得一个固定定位的元素。这个事实坑了不少开发人员，包括我本身。因此，若是你发现本身修复一个元素和结果并不像你所预期的那样，你要检查固定的元素的后代元素是否已经被改变。

再次，使用这种技术，咱们添加了一个空元素标记，这违背了标记语义化。那么，咱们怎样才能避免这种状况呢？

技巧3：使用伪元素

为了在咱们的标记中避免增长空元素，咱们可使用伪元素来建立浮层。

在这种技术上样式和注意事项和之前基本上同样，咱们将在body上使用:before或:after伪元素上写样式来代替给.overlay空元素。

html, body { min-height: 100%; }  body { position: relative; /* 若是给伪元素设置绝对定位，须要先设置相对定位 */ }  body:after { content: ""; display: block; position: fixed; /*也能够设置绝对定位*/ top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: rgba(0,0,0,0.2); }

你能够给伪元素相对于body元素设置绝对定位，也能够给他设置固定定位。无论你选择什么，你不得不考虑咱们前面提到的两种技术。

能够看看这个例子：

有一点很是重要，伪元素的过渡效果到如今在Safari和移动端的Safari也没法支持，因此这是一个巨大的缺点，若是你要使用一个伪元素来建立浮层，你要考虑这个方法不能给用户提供光滑的动画浮层效果。

技巧4：应用巨大的outline

这种方法不须要任何额外的元素来建立暗淡的背景浮层效果。相反，你可使用一个弹出窗口的outline，并将其值设置得很大，来实现浮层效果。

提出这种技术的是Lea Verou，而且她是第一个在Twitter上分享。

假设在模板中有一个元素实现弹出窗口，也将出现一个浮层：

<div class="modal">I'm the Modal Window!</div>

当弹出窗口在页面其余元素之上，可使用一个大的outline值，将它做为浮层的背景层。outline一般设置一个很是大的值，它须要足够大，以确保它的大小能覆盖整个视窗的大小。

.modal { /*弹出窗口定位在页面中间的样式*/ position: fixed; top: 50%; left: 50%; width: 300px; line-height: 200px; height: 200px; margin-left: -150px; margin-top: -100px; background-color: #f1c40f; text-align: center; /* 浮层须要的样式 */ z-index: 10; /* 保持在其余元素上最上面 */ outline: 9999px solid rgba(0,0,0,0.5); }

固然，你不能忘了设置z-index值，让弹出窗保持在页面其余元素之上。

要记住的一件事情，在这里当你使用这种技术实现浮层效果，不能防止鼠标与其余页面元素的交互。当你点击页面上的其余元素，你不能防止指针和鼠标事件，在大多数状况下，这多是一个不良的效果。因此在你的效果中，你要考虑是否使用这种技术。

还请注意，在边框外面使用了一个巨大的outline，在此处没法使用border-radius。在咱们的例子中若是你有一个边界使用了圆角，你将注意到会有一个缺口。若是你的弹出窗口要使用一个圆角，这可能不是一个好的选择。

技巧5；在弹出窗口应用一个大的box-shadow

该技术与前面示例惟一的区别是，在弹出窗口没有使用巨大的outline，而是使用了一个box-shadow。

.modal { /* 弹出窗口居中样式 */ position: absolute; top: 50%; left: 50%; width: 300px; line-height: 200px; height: 200px; margin-left: -150px; margin-top: -100px; background-color: #f1c40f; text-align: center; border-radius: 5px; /* 浮层的样式 */ z-index: 10; /* 保持元素在页面其余元素之上*/ box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); }

效果是大同小异：

固然，这种技术也不能阻止与页面其余元素之间的交互。

如今，尽管说起使用这种技术做为一个建立浮层的方法，但我强烈建议你不要使用它来建立浮层。甚至更多的是，在你的页页和应用中不要使用太多的阴影效果。

box-shadow结合其余样式，好比说border-radius或者大量使用将会给性能带来一个巨大的瓶劲，甚至会使用的应用程序没法在智能手机和平板电脑上使用，由于他们很不想在应用程序中使用box-shadow。

box-shadow的渲染是昂贵的，在固定元素使用大的阴影变得更为糟糕，由于当页面滚动时会强迫浏览器重绘。特别是在Firefoxk ，固定元素和大型的CSS阴影会让它变得更慢。

因此，在您的应用程序中尽可能避免使用太多的大的box-shadow，由于它将会是一个显著的影响应用程渲染。当你发现你要使用大量的盒子阴影的状况下，你至少能够尝试在智能手机和平板电脑中删除这些盒子阴影效果，而且经过一些特殊技术，为这些设备提供后备的样式。

技巧6：使用<dialog>元素

最后一种技术，咱们将讨论的是一个至关新的技术，也是很是棒的！并且用来建立一个弹出层或对话框，这种技术是最具语义化的。

弹出窗如今能够轻松的使用dialog元素来建立。dialog元素能够在页面内部提供一个对话框的功能。一个在Dom中的对话框，可使用普通的CSS样式。

dialog元素表示一个应用程序的一部分，能够用于用户执行任务，例如一个对话框、浮层或弹出窗口。——WHATWG HTML Spec

HTML中的dialog元素有四个主要特征，而这些特征中就有三个用于制做浮层的特性让咱们最感兴趣(第四个特征在写这篇文章时尚未实现)：

  •  默认情u状况下，当打开一个对话框时，他是垂直居中的。它仍然是绝对定位的，因此它也能够滚动。 DOM中的dialog定位始终会是在视窗的中间位置。
  •  dialog是一种模式。当一个dialog打开，它会锁定文档其余部分。
  •  dialog是全屏的，而且也放置在最顶层。dialog模式在最顶层。因此你不须要担忧须要使用z-index来保持弹出层放置在页面其余元素之上。

至关不错，对吗？默认状况下，弹出层在页中处于居中位置，但如前面第一点所述，它使用绝对定位，因此它能够滚动。你能够在你的样式中覆盖默认的绝对定位。若是你决定改变固定的位置，你也能够经过top和left值来改变。

dialog元素能够放在DOM中的任何地方：

<dialog class="modal">This is the dialog!</dialog>

能够在样多中像其余块元素同样来设置dialog的样式：

.modal{ /* 任意样式 */ background-color: white; border-radius: 5px; box-shadow: 2px 2px 2px rgba(0,0,0,0.2); height:200px; width:300px; /* 设置弹出窗固定在页面，而且居中显示 */ position:fixed; top:50%; left:50%; margin-left: -150px; margin-top:-100px; }

dialog元素也有伪元素叫做::backdrop，用来设置弹出层后的背景样式，从而建立浮层效果。咱们前面使用了五种技巧，只有这一次，你可使用默认的元素和伪元素建立浮层效果。

因此，使用HTML的dialog元素建立一个浮层效果，你只须要给dialog元素的伪元素设置一个背景色，交且定位，让他大小等于视窗大小：

.modal::backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); }

结果看起来像这样：

CSS3 Transform——transform-origin

如今你使用了dialog元素建立了一个浮层。

为了使用工做变得更简单，dialog提供了一个API，能够经过show()和hide()这样的函数让对话框显示和隐藏。

你能够经过Eiji Kitamura的示例能够了解更多关于dialog元素及其API。当你在浏览器中查看它时，示例运行在一个polfill模式中。

结束语

我认为咱们已经覆盖了几乎全部的技术，你可使用它来建立一个弹出的对话框。正如你可能已经猜到了，在最后一个技术介绍的是使用dialog元素建立一个弹出窗，但在撰写本文时，它仅仅只有Chrome Canary浏览器支持，须要开启polyfill变量。因此你如今试使用，你要考虑你的浏览器的兼容性。可是一旦全部浏览器都支持它，它将是建立弹出窗口的最好方式，并且还有不少特性能够用来处理它。

我但愿你喜欢这篇文章，而且有所用。感谢您的阅读！

你知道其余的CSS技术来建立弹出窗口吗？若是您有这方面的方法，能够在下面的评论中分享。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了我的对技术的理解。若是翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载，烦请注明出处：

英文原文：http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

中文译文：http://www.w3cplus.com/css/css-overlay-techniques.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程