css3 filter图片美化的10种特效（只支持webkit内核）

柔光的暖阳◎ 2022-08-06 03:07 151阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <title>滤镜</title>
    <style type="text/css">
    .photo{ width:500px; height:658ox; margin:0 auto; border:solid 1px #000; padding:2px;}
    .filter1{ -webkit-filter:grayscale(1);}        /*去色*/
    .filter2{ -webkit-filter:sepia(1);}            /*黄昏色*/
    .filter3{ -webkit-filter:saturate(0.5);}       /*饱和度 浅色*/
    .filter4{ -webkit-filter:saturate(3);}         /*饱和度 深色*/
    .filter5{ -webkit-filter:hue-rotate(90deg);}   /*色相旋转*/
    .filter6{ -webkit-filter:invert(1);}           /*反色*/
    .filter7{ -webkit-filter:opacity(.2);}         /*透明度*/
    .filter8{ -webkit-filter:brightness(.5);}      /*暗色*/
    .filter9{ -webkit-filter:contrast(2);}         /*对比度 增强*/
    .filter10{ -webkit-filter:blur(20px);}         /*模糊*/
    .filter11{ -webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);}         /*阴影*/
    </style>
    </head>
    
    <body>
    	<div class="photo">
        	<img src="images/12963083832394.jpg" class="filter9"/>
        </div>
    </body>
    </html>

![Center][]

[Center]: /images/20220806/d0a335096cc44898bc66ae25e2cd2c54.png

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3中Filter的十种特效

CSS3的filter属性简单且强大，本篇是学习CSS3 Filter所做的笔记。 grayscale 灰度，值为0-1之间的小数； sepia 褐色（我喜欢叫古风滤镜

短命女/ 2023年02月25日 13:23/ 0 赞/ 12 阅读

相关 Webkit 内核初探

作者: 阿吉校对&整理: lucifer 当下浏览器内核主要有 Webkit、Blink 等。本文分析注意是自 2001 年 Webkit 从 KHTML 分离

Dear 丶/ 2022年11月29日 03:10/ 0 赞/ 240 阅读

相关 css3实现瀑布流图片特效

htmL: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

忘是亡心i/ 2022年11月03日 11:52/ 0 赞/ 258 阅读

相关纯CSS3单选按钮选中美化js特效

[下载地址][Link 1] 纯CSS3单选按钮选中美化特效是一款纯css3制作radio单选按钮选中美化，单选框选中边框变色ui特效。 ![69bbf972c03e1c2

分手后的思念是犯贱/ 2022年09月16日 06:14/ 0 赞/ 225 阅读

相关 css3图片3d倾斜列表js特效

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/ffa1ac500de24c4

灰太狼/ 2022年09月14日 00:28/ 0 赞/ 238 阅读

相关 201.纯CSS 3D图片悬停特效

效果 (源码网盘地址在最后) ![9d2094216af66ca181b7a183c9c6e695.gif][] 源码 index.html <!DOC

╰+哭是因爲堅強的太久メ/ 2022年09月04日 14:54/ 0 赞/ 234 阅读

相关 10款重量级CSS3的全新特效

大家都知道，在网页制作时使用[CSS][]技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同

忘是亡心i/ 2022年08月26日 15:10/ 0 赞/ 204 阅读

相关 CSS3 Filter的十种特效

（补充：[http://www.cnblogs.com/fsjohnhuang/p/4127888.html][http_www.cnblogs.com_fsjohnhuang

ゞ浴缸里的玫瑰/ 2022年08月09日 06:58/ 0 赞/ 166 阅读

相关 css3 filter图片美化的10种特效（只支持webkit内核）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

柔光的暖阳◎/ 2022年08月06日 03:07/ 0 赞/ 152 阅读

相关 css3 filter

filter > filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscal

一时失言乱红尘/ 2022年05月20日 04:23/ 0 赞/ 183 阅读