搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
HTML/CSS
CSS3教程
CSS3基础教程
源代码
清空
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example of CSS3 Hue-rotate Filter Effect -基础教程 div.cn</title> <style> img.hue-normal { -webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */ filter: hue-rotate(150deg); } img.hue-wrap { -webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */ filter: hue-rotate(480deg); } /* Some CSS to beautify this example */ table td{ padding: 10px; text-align: center; } </style> </head> <body> <table> <tr> <td> <img src="/run/images/parrot.png" alt="Parrot"> </td> <td> <img class="hue-normal" src="/run/images/parrot.png" alt="Parrot"> </td> <td> <img class="hue-wrap" src="/run/images/parrot.png" alt="Parrot"> </td> </tr> <tr> <td>原始图像</td> <td>hue-rotate(150deg)</td> <td>hue-rotate(480deg)</td> </tr> </table> </body> </html>
运行结果
