关于CSS3一些新属性的一些思考：夜间模式、区域阴影、透明度

程序员文章站 2024-03-24 15:35:16

...

关于 filter —— 你以为它只能做单纯的“滤镜”吗？

不！常用的 blur 处理（图片）模糊程度、 opacity 处理（图片）透明度、 grayscale 处理（图片）灰度属性只是其世界组成中的一部分。
css-filter的实际用处可真不少。

其实，最【受人追捧】的夜间模式用filter也可以简单实现：

首先，我们拿到一个input标签 —— 它一般放在整个页面（body）的最上面 —— 这样就可以通过CSS的一些“特性”来控制“全局”：

<input type="checkbox" />

哦，你当然可以将它换成“按钮”的样式 —— 这用单纯的CSS也很容易实现 -> 细说UI组件库中的“开关”

当你点击这个“开关”时，就到了filter大展身手的时候了：

:checked ~ * {
	filter: invert(1);
}

filter: invert(xxx); —— CSS中的“反相”：其作用元素拥有这个值时会发生色调“翻转”，比如：白-黑；当作用元素是img图片时，会使图片色调也反转
xxx是定义转换的比例值。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。也可用0和1以及之间的小数表示。若值未设置，值默认是0。

这时候，就会对整个页面有效果。若页面中有图片元素，正如上面所说：invert会对图片造成“反转”效果（这才是它的本意！）。
这时我们可以在图片上用到filter的另一个属性值：inherit：

img{
	filter: inherit;  /** 又做了一次反转 **/
}

inherit：从父元素继承该属性（☞ filter属性）

filter还可以用来“在非透明区域加阴影效果”：filter: drop-shadow; 它能达到和box-shadow一样的效果（还支持svg）—— 虽然box-shadow已经很完美了。

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

你甚至还可以用filter的 hue-rotate 属性值做 “字体动态颜色流转效果” —— 结合animation：

text{
	-webkit-background-clip: text;   /** “切割”使显示区域只在字体上 **/
    -webkit-text-fill-color: transparent;  /** 隐藏掉字体本身的颜色 **/
    background-image: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia);
    animation: hue 7s linear infinite;
}

@keyframes hue {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

好吧，其实filter主要还是用来做「各种过滤（color、image…）」的，咱们别“舍近求远”。比如：遮罩层就经常用到这个 —— 跟这个用途类似的还有一个是“mask”（全名：mask-image，CSS3属性）。也是很好用的。

但是他们都有一种情况不能“兼容”：background-image仅背景图片透明度设置！

事情是这样的：某元素，我们希望它的背景图片（background-image）是半透明的，但是，元素里面的其他内容，例如文字，图标之类的还是照常显示。
如果是纯色背景或者是CSS渐变背景，很好处理，使用rgba或者hsla颜色色值即可。
但是，如果是url()背景图像，似乎就无能为力了 —— 无论是~~filter滤镜~~ 、~~mask遮罩~~ 还是~~opacity透明度~~ 设置都无法 “准确作用于” 背景图像，所有前面提到的这些方法都会影响文字等的正常显示。

此前，我们有一种解决的方案是 CSS伪元素：

box::before {
   content: '';
   position: absolute;   /** 对box本身应该加relative **/
   left: 0; right: 0; top: 0; bottom: 0;
   background: url(xxx.jpg) no-repeat center/cover;
   z-index: -1;   /** 对box本身应该设置为0（/高于-1） **/
   opacity: .4;
}

这种方式无疑是巧妙的，但并不友好 —— 元素定位、拉伸展示、背景图片大小以及z-index都可能让新手“望而却步”。

有一种新的解决方案是 —— cross-fade() （background-image属性值之一），它支持两个图片url参数，一个透明度参数。愿意是“用来处理两张图片叠加问题”，但似乎这方面没有太多使用，反而被发现可以方便地用在“对一张图片设置透明度（且仅作用图片，不对文字产生影响）”的问题上：
透明度参数仅对第二个url的图片起作用，可任取一张“透明图片”作为第一个参数，第二个url上就放上我们想要处理的图片（真正图片），如此，即可：

img{
	background-image: cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url(mxc.jpg), 40%);
    /* -webkit-语句需要放在没有私有前缀语句的下面 */
    background-image: -webkit-cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url(mxc.jpg), 40%);

    background-size: cover;
}

（当然，如果页面中需要这样做的地方多的话，你也可以把“透明度图片”设置为CSS3变量，然后不断的用var()引用）