CSS 揭秘(6)--弱化背景

Posted by liveipool on February 8, 2017

弱化背景

通过阴影来弱化背景

很多时候,我们需要通过一层半透明的遮罩层来把后面的一切整体调暗,以便凸显某个特定的UI元素,引导用户关注。比如弹出层之类的。这个效果最常见的实现方法就是增加一个额外的HTML元素用于遮挡背景,并添加如下样式:

.overlay { /*用于遮挡背景*/
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.8);
}

.lightbox { /*需要吸引用户注意的元素*/
	position: absolute;
	z-index: 1;
	// ...
}

.overlay遮罩层负责把这个关键元素背后的所有东西调暗。.lightbox需要指定一个更搞的z-index,以便绘制在遮罩层的上层。这个方法稳定可靠,但需要增加一个额外的HTML元素,因此这种方法还有待改进。

伪元素方案

也有很多的缺陷,不太实用。

box-shadow方案

box-shadow的扩张参数可以把元素的投影向各方向延伸放大。具体做法就是生成一个巨大的投影,我骗以也不模糊,简单而拙劣地模拟出遮罩层的效果:

box-shadow: 0 0 0 999px rgba(0,0,0,.8);

但是当屏幕尺寸再变大时,要么继续增大扩张面积,要么通过视口单位(见下文介绍)来一劳永逸地解决它。(这里因为是向四个方向扩张,因此50vmax就足够了)。

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

这种方案也有两个问题:

  1. 由于遮罩层的尺寸和视口相关,而不是与页面相关的,因此滚动页面时,遮罩层的边缘就露出来了。因此建议有限度的使用这个技巧,最好当页面没有滚动条时再用。
  2. 当使用一个独立的元素或伪元素来实现遮罩层时,这个遮罩层不仅可以从视觉上把用胡的注意力引导到关键元素上,还可以防止用户的鼠标与页面其他部分发生交互,因为遮罩层会捕获所有指针事件。box-shadow并没有这种能力,因此它只能在视觉上起到引导注意力的作用,无法阻止鼠标交互。

六个易忘的单位

1.em

<style type="text/css">
    body {font-size: 12px;}
    div  {font-size: 1.5em;}
</style>
<body>
    <div>
        Test-01 (12px * 1.5 = 18px)
        <div>
            Test-02 (18px * 1.5 = 27px)
            <div>
                Test-03 (27px * 1.5 = 41px)
            </div>
        </div>
	    </div>
</body>

因为font-size具有继承性,所以层数越深字体越大。

2. rem
虽然上面使用em的情况可能会在开发中用到,但是我们有时候想有一个基准来扩展。遇到这种需求时,我们可以使用rem单位,rem中的“r”代表“root”,这意味着设置当前元素的字体大小为根元素,大多数情况下,我们会设置在html元素上。

<style type="text/css">
    html {font-size: 12px;}
    div  {font-size: 1.5rem;}
</style>
<body>
    <div>
        Test-01 (12px * 1.5 = 18px)
        <div>
            Test-02 (12px * 1.5 = 18px)
            <div>
                Test-03 (12px * 1.5 = 18px)
            </div>
        </div>
    </div>
</body>

当然,rem单位不仅应用在字体上,还可以实现到CSS 网格系统中。

3. vh 和 vw
在进行响应式布局时,我们常常会使用百分比来布局,然而CSS的百分比不总是解决每个问题的最佳方案,CSS的宽度相对于离它最近的父元素的宽度。 如果你想使用视口的宽度、高度而不是父元素的宽高,可以使用vh和vw单位。
1vh = viewportHeight * 1/100;
1vw = viewportWidth * 1/100;
使用vh、vw就可以保证元素的宽高适应不同设备。

4. vmin 和 vmax
vw和vh对应于viewport的width和height,而vmin和vmax分别对应于width、height中的最小值和最大值,例如如果浏览器的宽/高被设置为1000px/600px,那么:
1vmin = 600 * 1/100;
1vmax = 1000 * 1/100;
也就是说100vmin等于width和height中的最小值,100vmax等于width和height中的最大值。

backdrop 方案

如果逆向引导用户关注的元素就是一个模态的< dialog >元素,那么根据浏览器的默认样式,它会自带一个遮罩层。借助::backdrop伪元素,这个原生的遮罩层也是可以设置样式的,比如把它变得暗一些:

dialog::backdrop {
	background: rgba(0,0,0,.8);
}

只是,现在浏览器对这个伪元素的支持还是一片荒芜,感觉这个伪元素还是相当有用的,期待全面支持的那一天。
32.1.png

通过模糊来弱化背景 方案

还有一种更加优雅的方式,就是把关键元素之外的一切都用一个额外的HTML元素包装起来,并使用blur(), contrast(), brightness()滤镜等来将它们模糊掉,以此来配合(或取代)阴影效果。
只是< dialog >元素现在Firefox和IE都不支持,对滤镜的支持也不太好,因此现阶段这种方式还不太可行。

滚动提示、交互式的图片对比控件

这两个也是比较有意思的内容,第一个是可用来消除难看的滚动条通过其他方式提示滚动,另外一个是通过滑动来对比两张图,稍微有些复杂,以后可能用到时来学学。