旧域名新网站,环球旅行卡怎么用,做维修电器网站,wordpress 修改页脚文章目录 filter 属性滤镜算法函数blur#xff1a;高斯模糊hue-rotate#xff1a;色相环contrast#xff1a;对比度grayscale#xff1a;灰度drop-shadow#xff1a;图片阴影 常见的滤镜效果图片内容轮廓阴影毛玻璃图片黑白调整图片色相和对比度使元素或文字变圆润 filter… 文章目录 filter 属性滤镜算法函数blur高斯模糊hue-rotate色相环contrast对比度grayscale灰度drop-shadow图片阴影 常见的滤镜效果图片内容轮廓阴影毛玻璃图片黑白调整图片色相和对比度使元素或文字变圆润 filter 属性
filter 属性为滤镜属性。 格式filter: filter-function;
什么是滤镜 滤镜将元素中的像素点通过一些算法计算后转换成新的像素点。
它还有一个兄弟属性drop-filter 区别在于filter 表示让本元素像素点参与计算drop-filter 表示将本元素下面盖着的元素参与计算。
滤镜算法函数
有什么样的算法函数就有什么样的滤镜效果。而且滤镜函数不仅可以单独使用还是组合使用。 像素点a - 算法1 - 算法2 - 像素点b
blur高斯模糊
blur(10px)
blur 为高斯模糊函数算法为参考周围像素点颜色来计算当前像素点的颜色。10px 表示参考的范围半径。参考范围越大自然也越模糊所以 blur() 里面这个值越大画面就越模糊。
hue-rotate色相环
hue-rotate(45deg)
它可以调整像素点的色相函数里面的角度就是色相环上对应的颜色。
contrast对比度
contrast(1.5)
默认值为 1值越小表示颜色对比度越小。
grayscale灰度
grayscale(1)
默认值为 0当值为 1 的时候网页就变黑白了。纪念日很常用。
drop-shadow图片阴影
drop-shadow(10px, 10px, 10px, ragb(0,0,0,0.5);
这个函数有点类似于 box-shadow 属性。box-shadow 属性在元素的整个框后面创建一个矩形阴影而 drop-shadow() 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。
常见的滤镜效果
图片内容轮廓阴影
注意这种效果一般使用的图片都是背景透明的 png 图片。 因为这样才能体现出阴影沿着图片内容的轮廓。如果不透明图片内容就是一个矩形那效果和 box-shadow 看起来一样了都是生成一个矩形的阴影。
.img-drop-shadow {filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}
.img-box-shadow {box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}毛玻璃
.ground-glass {height: 260px;width: 400px;position: absolute;inset: 0;display: flex;justify-content: center;align-items: center;margin: auto;border-bottom: 1px solid hsla(0, 0%, 100%, 0.4);border-left: 1px solid hsla(0, 0%, 100%, 0.4);border-radius: 20px;box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 20px hsla(0, 0%, 100%, 0.1);background-image: linear-gradient(to top right, rgba(90, 149, 207, 0.5), rgba(58, 76, 99, 0.8));color: hsla(0, 0%, 100%, 0.8);backdrop-filter: blur(6px);z-index: 10;
}图片黑白
.img-gray {filter: grayscale(1) drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}调整图片色相和对比度
.img-color--change {filter: contrast(1.2) hue-rotate(274deg) drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}使元素或文字变圆润
以文字为例。
做法
先将文字 blur 模糊。在父元素中设置背景色和 filter 滤镜并增大对比度 contrast。 filter: contrast(); 和 background-color 一定要一起显示出现在父元素中父元素层级不限。
原理 文字模糊后父元素又加强对比度加大对比度的作用是会让文字更清晰。但本身文字已经是模糊的了。因此对于文字的边缘地带浏览器会自动融合文字颜色和背景色。整体效果就是文字变圆润了。
.text-card {display: flex;justify-content: space-evenly;font-size: 60px;font-weight: 700;
}
.text-card--soft {background-color: #ffffff;filter: contrast(15);
}
.text--soft {color: red;filter: blur(5px);
}div classtext-cardh1 classtextikun/h1div classtext-card--softh1 classtext--softikun/h1/div
/div
