问答一下,轻松解决,电脑应用解决专家!
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win10/Win11
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascriptLinux系统
PHP教程CSS教程XML教程

关于CSS3新属性:夜间模式、区域阴影、透明度

更新时间:2021-04-13 12:09 作者:恪愚点击:

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

不!常用的 blur 处理(图片)模糊程度、 opacity 处理(图片)透明度、 grayscale 处理(图片)灰度 属性只是其世界组成中的一部分。

css-filter的实际用处可真不少。

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

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

<input type="checkbox" />

当你点击这个“开关”时,就到了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任一属性)

当然,你还可以更简单的完成:

body{

filter: invert(1) hue-rotate(180deg);

}

hue-rotate(deg):给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。

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

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

甚至还可以只用上面提到的 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()引用)

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容