Page 201 - css揭秘

怪：这个范围输入控件只是随便放在图片下面而已（参见图 6-30）。我们需
要用一点 CSS 来把它定位到图片之上，并让它与图片一样宽：

.image-slider input {
position: absolute;
left: 0;
bottom: 10px;
width: 100%;
margin: 0;
}

在图 6-31 中可以看到，它现在看起来已经相当不错了。一些私有的伪
元素可以为这个滑块控件进一步设置样式，比如 ::-moz-range-track、::-
ms-track、::-webkit-slider-thumb、::-moz-range-thumb 和 ::-ms-
thumb 等。与大多数私有特性一样，它们的渲染结果往往不一致、不健壮、
不可预测，因此我并不推荐使用它们，除非你真的别无他法。我是认真的。
不过，如果我们只是想让这个范围输入控件在视觉上与整个控件更加统
一，可以用混合模式和 / 或滤镜来实现。multiply、screen 和 luminosity
这几种混合模式似乎都可以得到不错的效果。此外，filter: contrast(4)
图 6-31 会让这个滑块变得黑白分明，而低于 1 的对比度值会让它显示出更多的灰色
我们已经通过 CSS 把这个范围输 调。这其中的可能性是无穷无尽的，并不存在通用的最佳选择。你甚至可以
入控件覆盖到图片之上了
把混合模式和滤镜组合起来，就像这样：

filter: contrast(.5);
mix-blend-mode: luminosity;

我们还可以增加用户的可操作区域，从而提升使用体验（源于 Fitts 法
则）。具体做法是先减少它的宽度，再用 CSS 变形将其放大：

width: 50%;
transform: scale(2);
transform-origin: left bottom;
图 6-32
同时使用混合模式和滤镜来让范 在图 6-32 中，你可以看到完成这两步优化之后的效果。这个解决方案
围输入控件在视觉上融入整个控 的另一个好处在于（尽管只是暂时性的），范围输入控件当前的浏览器支持
件，并用 CSS 变形来让它变得更
大一些 度比 resize 属性要好一些。

向 Dudley Storey（http://demosthenes.info）脱帽致敬，感谢他提出这
个解决方案的第一个版本（http://demosthenes.info/blog/819/A-Before-And-

After-Image-Comparison-Slide-Control-in-HTML5）。
致 敬

170 第 6 章 用户体验

඀ࠡ JOEC