css设置字体颜色:CSS改变图片颜色，Css滤镜-字体教程免费ppt模版下载-道格办公
投稿
  1. JustNews首页
  2. 字体教程
  3. CSS改变图片颜色，Css滤镜

CSS改变图片颜色，Css滤镜

作者: 道格办公 • • 字体教程 • 浏览量 901

今天我们将学习使用CSS的滤镜属性来改变图片的颜色。CSS的filter属性可以使用多种滤镜效果，如none、blur()、brightness()和contrast()。 1. none：这是默认值，不应用任何滤镜效果。 2. blur()：该滤镜模糊图像，可以指定模糊的程度。例如，blur(5px)将图像模糊5像素。 3. brightness()：该滤镜调整图像的亮度。可以使用百分比或小数来指定亮度的值。较小的值会使图像变暗，而较大的值会使图像变亮。例如，brightness(50%)将图像的

利用CSS改变图片颜色的多种方法

今日主角：CSS:filter

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

属性说明：

filter: none

没有任何效果，默认filter就为none

filter:blur( ) 高斯模糊

给图像一个高斯模糊效果，length值越大，图像越模糊

我们来尝试一下

img {

filter:blur(2px);;

}

brightness(%) 线性乘法

可以让图片看起来更亮或者更暗

img {

filter:brightness(70%);

}

contrast(%) 对比度

调整图像的对比度。

img {

filter:contrast(50%);

}

grayscale(%) 将图像转换为灰度图像

这个效果可以将图片做旧，有一种时代沧桑感。喜欢古风的人一定会喜欢上这个效果的

img {

filter:grayscale(80%);

}

除了古风还有一种用法是有的时候需要将全站变成灰色，如大屠杀纪念日的时候。

可以这样设置：

*{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

sepia(%) 将图像转换为深褐色

下面给图片一个暖暖的色调。

img {

filter:sepia(51%)

}

文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/CSS%20changes%20picture%20color%20Css%20filter.html

赞 (810)
打赏 支付宝扫一扫 支付宝扫一扫
Lomu Monica 专栏作者
48 196
single-end

相关推荐