CSS秘密花园： 通过亮度调节去强调（De-emphasize）
MFHEloisa
8年前
<p>《 <a href="/misc/goto?guid=4958976660757929944" rel="nofollow,noindex">CSS Secrets</a> 》是 <a href="/misc/goto?guid=4958976660849001117" rel="nofollow,noindex">@Lea Verou</a> 最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。</p> <p><img src="https://simg.open-open.com/show/b873adc9c0b700ab68ae0efe9cf398be.jpg"></p> <p>很多时候，我们需要通过在元素背后添加一个半透明的深色叠加来让内容变暗，强调并提醒用户关注某个UI元素。例如，lightboxes和“quick tours”接口经常需要这种效果。</p> <p><img src="https://simg.open-open.com/show/7568e6892b7634a6a44ac00aecd7fe37.png"></p> <p>来完成这个效果的最常见的技术是添加一个额外的HTML元素来调节亮度，并应用一些如下的CSS：</p> <pre> <code class="language-css">.overlay { /* For dimming */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.8); } .lightbox { /* The element to draw attention to */ position: absolute; z-index: 1; /* [rest of styling] */ } </code></pre> <p>深色叠加的目的是把用户的注意力放到我们希望用户注意的元素上边，然后元素后边的内容都变暗。 .lightbox 有一个更高的 z-index ，可以让它放置在深色叠加之上。所有这些都是非常OK没有问题的，但是它需要一个额外的HTML元素，也就是说效果不能只通过CSS应用。这不是什么大问题，但是这是一个我们希望可以避免的不便之处，如果可以的话。幸运的是，大多数的情况下我们都可以搞定。</p> <h2>基于伪元素的解决方案</h2> <p>我们可以使用伪元素来消除对额外HTML元素的需求，如下：</p> <pre> <code class="language-css">body.dimmed::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(0,0,0,.8); } </code></pre> <p>这是一个稍微好点的解决方案，这也意味着我们现在可以直接通过CSS应用这种效果。但是，问题来了，这不是非常方便，因为 <body> 元素可能已经应用了一些其它的东西在它的 ::before 伪元素之上了。所以，也就是说如果想要应用这个效果，我们通常需要一些JavaScript来应用到 dimmed 类上。</p> <p>我们可以通过给元素本身的 ::before 伪元素应用深色叠加、并给它一个 z-index:-1 来解决这个问题，这样它就位于我们的元素之下了。尽管它解决了可移植性的问题，它并不能给我们控制Z轴的位置提供很精确的控制。它可能最终会被放在我们的元素下边（这是可取的）或放在我们的元素以及它的几个父元素下边。</p> <p>它的另一个问题是，伪元素没有自己的JavaScript事件。当使用一个单独的元素来进行叠加的时候，我们可以给它添加事件句柄——例如：当用户点击叠加层的时候，关闭高亮窗口。如果我们在同一个想要强调的元素上使用伪元素，想要检测用户是否点击了覆盖层或者元素是很棘手的。</p> <h2>box-shadow的解决方案</h2> <p>伪元素的解决方案非常灵活，而且符合大多数人对叠加的期望。但是，对于简单的用例或原型设计，我们可以采用 box-shadow 的spread半径，把它增大到你在每一边希望指定的大小。也就是说我们可以创建一个非常大的零偏移零模糊的shadow，用一种迅速又随性的方式来模拟覆盖层。</p> <pre> <code class="language-css">box-shadow: 0 0 0 999px rgba(0,0,0,.8); </code></pre> <p>第一个通过的解决方案有一个明显的问题是，在非常大分辨率（ > 2000px ）的地方它就会有问题。我们可以通过使用一个再大一点的数字来缓解这种情况，或者通过使用viewport单位来完全地解决这个问题，这样我们可以确保“overlay”总会比我们的viewport大。因为我们不能使用不同的水平和垂直spread半径值，viewport单位应该是 vmax 。如果你对于 vmax 这个单位不熟悉， 1vmax 等于 1vw 或 1vh ，取较大值。 100vw 等于viewport的width，同样， 100vh 等于viewport的height值。因此，能够满足我们需求的最小值是 50vmax ，因为它在每一边都会添加，所以我们的覆盖层的最终尺寸是 100vmax +我们的元素的尺寸：</p> <pre> <code class="language-css">box-shadow: 0 0 0 50vmax rgba(0,0,0,.8); </code></pre> <p>这种技术非常快速而且容易应用，但是它有两个相当严重的问题，限制了它的实用性。你发现了吗？</p> <p>首先，因为我们的元素的尺寸是和viewport相关的，和页面没有关系，当我们滚动页面的时候，会看到覆盖层的边界，除非元素是 position: fixed; 定位的，或者是页面本身不够长，不能滚动。此外，因为页面可以是很长很长的，它不会机智地尝试去通过增加spread半径来克服这一点。相反，我建议你只对 fixed 定位的元素，或页面很小没有滚动的情况下使用这种技术。</p> <p>第二，使用一个单独的元素（或伪元素）作为覆盖层并不仅仅会将用户的注意力引导到我们想要的元素上。它还会阻止鼠标和页面的其余部分交互，因为它捕获了指针事件。 box-shadow 没有这个属性。因此，它只会在视觉上帮助用户将注意力引导到特定的元素上，而不会自己捕获任何鼠标交互事件。至于这是否可以接受，要看你具体的使用情况。</p> <h2>backdrop解决方案</h2> <p>如果你想要变成焦点的元素是一个模式对话框 <dialog> （ <dialog> 元素通过它的 showModal() 方法显示），它已经有一个覆盖层了，通过用户代理样式表。这种原生的覆盖还可以通过 ::backdrop 伪元素来添加样式，例如，让它变暗一点：</p> <pre> <code class="language-css">dialog::backdrop { background: rgba(0, 0, 0, .8); } </code></pre> <p>这种方法唯一需要注意的地方是，在编写的时候，浏览器的支持是非常有限的，所以一定要在使用前检查其当前状态。记住，即使它不被支持，如果对话框没有覆盖层的话，也不会影响到什么东西，因为它只是一个用户体验的改善。</p> <p>来自： <a href="/misc/goto?guid=4959670152088440266" rel="nofollow">http://www.w3cplus.com/css3/css-secrets/de-emphasize-by-dimming.html</a></p>