社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 css教程 css3的过滤效果的简单示例

css3的过滤效果的简单示例

高洛峰
高洛峰
Mar 04, 2017 am 10:41 AM
css3 过滤

下面小编就为大家带来一篇css3的过滤效果简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

css3的过滤效果的简单示例

上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~

好，咱们先把照片后面的白框实现，

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<style>

#p1{  

 

　　　　　　　　　　/*给p定义宽高和颜色*/  

 

 

　　　　　　　　　　width: 200px;  

　　　　　　　　　　height: 250px;  

　　　　　　　　　　background: white;   

 

　　　　　　　　　/* 内填充距离照片为15px ，文字居中*/  

　　　　　　　　　　padding: 15px;  

 

　　　　　　　　　　text-align: center;  

 

　　　　　　/*　　把白色背景旋转-10deg  */  

 

　　　　　　　　　　-webkit-transform: rotate(-10deg);  

 

　　　　　　/*给背景一个阴影的效果*/  

　　　　　　　　　　box-shadow: 4px 4px 4px #666;  

　　　　　　　　　　float: left;  

　　　　　　　　　　}  

 

 

 

</style>

<BR>

<body><BR>

<p id="p1">

<img src="img/001V28Mwty6Fww02IiNad&690.jpg">

<p>灰色滤镜</p>

</p>

<BR>

</body>

登录后复制

把白色的背景框写好之后，接下来就该到滤镜了

首先来第一张，艺术的黑白色

1

2

3

4

5

6

#p1 img{  

 

/*把p1里面的图片百分百，等同于相对于在p1里面百分比放大填充*/  

width: 100%;　　　　　　　  

/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/　  

-webkit-filter: grayscale(1); 　　}

登录后复制

第二张照片，额...老照片.

1

2

3

4

#p1 img{  

            width: 100%;  

            -webkit-filter: sepia(1);  

        }

登录后复制

第三张照片，反色？我也不太清楚啥颜色

1

2

3

4

#p1 img{  

            width: 100%;  

            -webkit-filter: hue-rotate(200deg);  

        }

登录后复制

第四张照片，仿佛罩了一层白雾

1

2

3

4

#p1 img{  

            width: 100%;  

            -webkit-filter: opacity(0.5);  

        }

登录后复制

还有一张照片的效果图上没有，是模糊效果代码如下

1

2

3

4

#p4 img{  

            width: 100%;  

            -webkit-filter: opacity(0.5);  

        }

登录后复制

好了，我的滤镜分享完毕，接下来美图去了

以上这篇css3的过滤效果简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多css3的过滤效果的简单示例相关文章请关注PHP中文网！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前 By DDD
威尔R.E.P.O.有交叉游戏吗？
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7546
15
CakePHP 教程
1381
52
steam的账户名称是什么格式
83
11
win11激活密钥永久
57
19
NYT连接提示和答案
21
90
显示更多
Related knowledge
纯CSS3怎么实现波浪效果？（代码示例） 纯CSS3怎么实现波浪效果？（代码示例） Jun 28, 2022 pm 01:39 PM

纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！

巧用CSS实现各种奇形怪状按钮（附代码） 巧用CSS实现各种奇形怪状按钮（附代码） Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮，希望对大家有所帮助！

夸克如何打开过滤重复文件 夸克如何打开过滤重复文件 Mar 01, 2024 am 11:25 AM

使用夸克浏览器时，其中有一个过滤重复文件的功能，有些朋友对此还不是很了解，下面为大家介绍一下打开这个功能的操作方法，感兴趣的朋友和我一起来看看吧。1.首先在手机中点击“夸克浏览器”进入界面后，在页面中间的选项里点击选择“夸克网盘”打开进入。2.在夸克网盘界面里下方部分找到“备份设置”，并在上面点击打开，如下图所示位置：3.接下来在进入的页面里有一个“过滤重复文件”，在它的后面显示有一个开关按钮，在上面点击圆形的滑块把它设置为彩色即为开启该功能，继续备份文件时将会跳过重复的文件来节省网盘容量。

Python实现XML数据的过滤和筛选 Python实现XML数据的过滤和筛选 Aug 09, 2023 am 10:13 AM

Python实现XML数据的过滤和筛选XML（eXtensibleMarkupLanguage）是一种用于存储和传输数据的标记语言，它具有灵活性和可扩展性，常被用于在不同系统之间进行数据交换。在处理XML数据时，我们经常需要对其进行过滤和筛选，以提取出我们所需的信息。本文将介绍如何使用Python来实现XML数据的过滤和筛选。导入所需模块在开始之前，我们

css怎么隐藏元素但不占空间 css怎么隐藏元素但不占空间 Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

如何利用PHP函数进行搜索和过滤数据？ 如何利用PHP函数进行搜索和过滤数据？ Jul 24, 2023 am 08:01 AM

如何利用PHP函数进行搜索和过滤数据？在使用PHP进行开发的过程中，经常需要对数据进行搜索和过滤。PHP提供了丰富的函数和方法来帮助我们实现这些操作。本文将介绍一些常用的PHP函数和技巧，帮助你高效地进行数据的搜索和过滤。字符串搜索PHP中常用的字符串搜索函数是strpos()和strstr()。strpos()用于查找字符串中某个子串的位置，如果存在，则返

css3怎么实现花边边框 css3怎么实现花边边框 Sep 16, 2022 pm 07:11 PM

在css中，可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框，即给边框加上背景图片，只需要将背景图片指定为花边样式即可；语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。

PHP和PHPMAILER：如何实现邮件发送的自动过滤功能？ PHP和PHPMAILER：如何实现邮件发送的自动过滤功能？ Jul 21, 2023 am 09:25 AM

PHP和PHPMAILER：如何实现邮件发送的自动过滤功能？在现代社会中，电子邮件已成为人们交流的重要方式之一。然而，随着电子邮件的流行和广泛使用，垃圾邮件的数量也呈现出爆炸式增长的趋势。垃圾邮件不仅会浪费用户的时间和网络资源，还可能带来病毒和钓鱼行为。因此，在开发邮件发送功能时，加入自动过滤垃圾邮件的功能变得至关重要。本文将介绍如何使用PHP和PHPMai

See all articles