整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

纯干货,前端学者的福音!如何使用css滤镜改变图片颜色

到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具。作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。

你以为这些是经过PS软件处理出来的?不不不,只有一张图片,纯粹的是用css写出来的。

本文的目标就是:手把手教大家学习CSS滤镜(filter)属性,CSS滤镜提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。

使用CSS滤镜只需要如下5步:

1. 准备工作

2. 使用sublime快速书写HTML结构

3. 使用CSS选择器选中目标标签

4. CSS滤镜的基本用法

5. CSS滤镜实例演示

一、第一步 —— 准备工作

目标 : 下载并安装sublime以及准备一张图片素材

下载对应你操作系统的sublime编辑器,http://www.sublimetext.com/3

图片素材:

小结 : 准备好代码编辑器,比如sublime,hbuilder,vscode等编辑,都是可以的,再准备一张图片素材

二、第二步 —— 书写HTML结构

目标 : 使用sublime编辑器快速生成HTML5结构的页面

1. 安装sublime以后,并打开sublime.exe

2. 在电脑的某个目下新建一个空目录code,将我们的图片素材放一个images文件夹下,并把这个images文件夹也放在code中

3. 使用sublime打开我们刚准备好的code文件夹

4. 使用sublime新建一个HTML网页文件,后缀名需要为html

5. 接着输入一个英文输入状态下的!再按tab键,即可快速生成HTML5的基本结构!

6. 在网页中插入内容

小结 : 使用代码编辑器新建网页文件,并加入两张img图片标签,正确引入图片

三、第三步 —— 使用CSS选择器选中目标标签

目标:使用CSS类选择器选中我们页面中的目标图片标签, 格式 .类名

小结 : 使用 css类选择 格式: .类名 选中对应的目标标签

四、第四步 —— CSS滤镜的基本用法

目标:了解CSS滤镜的基本用法以及各方法之间效果差异

1. CSS滤镜基本语法

filter: function(param);

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

提示:允许同时使用多个滤镜,多个滤镜效果之间使用空格分隔。

2. CSS滤镜支持的方法(function)有

– grayscale 灰度

– sepia 褐色

– saturate 饱和度

– hue-rotate 色相旋转

– invert 反色

– opacity 透明度

– brightness 亮度

– contrast 对比度

– blur 模糊

– drop-shadow 阴影

迎观看 Photoshop 教程,小编带大家了解如何使用 ps 将照片主题置于全新环境中。

不需要旅行预算来为您的照片寻找新的背景,第一步是隐藏朴素的灰色墙。选中模特图层,来到工具面板选择「快速选择工具」选择模型的形状。

选择「选择主体」,然后选择「选择并遮住...」以进入「选择并遮住...」工作区。

在「选择并遮住...」工作区的「属性」面板中,将「移动边缘」滑块向左移动以优化选择的边缘,「输出设置」选择「选区」,点击「确定」。

注意:离开「选择并遮住...」时,原来的背景又回来了;您将在下一步中解决此问题。

选择模型层后,单击「添加矢量蒙版」图标。

由于我们已将模型输出为「选择并遮住...」工作区的选区,因此 ps 会屏蔽(或隐藏)任何未选择的内容,因此灰色墙消失了,而选定的模型仍然存在。

我们希望将模型的灯光与背景的灯光相匹配。为此,复制新背景图层,可使用快捷键 command + J 将其移动到模型图层上方。

然后选择滤镜 > 模糊 > 平均。

在绿色图层和模型图层之间按住 Option 键以创建剪贴蒙版。

选择绿色图层后,将混合模式设置为「柔光」,并降低不透明度设置。

到「图层」面板的底部,点击「创建新的填充或调整涂层」按钮,选择「纯色」。

在「拾色器」中选择深蓝色,点击「确定」。应用深蓝色纯色调整图层,使其下方的每个图层都具有精加工色偏。

将混合模式设置为「柔光」,并降低调整图层的不透明度设置。

有了新的背景,您可以在世界任何地方(甚至在这个世界之外)拍摄照片的主题。

https://www.macz.com/mac/7636.html?id=NzY4OTYwJl8mMTAxLjE5LjE2NS4yNDU%3D


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性</title>


    <style>
        <!-- p{ -->
            <!-- color: #FF0000; -->
            <!-- font-size: 30px; -->
            <!-- text-align: center; -->
            <!-- line-height: 200px; -->
            <!-- /* -->
                <!-- border 边框 -->
             <!-- */ -->
            <!-- border: 1px solid red; -->

        <!-- } -->
        div{
            border: 1px solid red;
            /*
                尺寸
             */
            height: 1482px;
            width: 1000px;
            /*
                背景
             */
            background: url("image/1.jpg") no-repeat center;
        }
		p{
			color:red;
			font-size:13px;
			font-family:'楷体';
		}
    </style>
</head>
<body>
	<!-- <p>你好</P> -->
    <div><p>你是我得不到的女孩</p>
  </div>
</body>
</html>