CSS图片滤镜效果+代码

2020-01-27 14:18:25

字体：大中小

来源：转载

供稿：网友

效果很棒的CSS图片滤镜效果，怎么看你会发现图片处理前和处理后的明暗变化，是不是处理后的图片更加清淅自然？IE8版本以上也可看到效果，同时兼容火狐、Chrome等浏览器。

<!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><title>CSS图片滤镜效果+代码</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">.retro{    -webkit-box-shadow:inset 0px 0px 100px rgba(0,0,20,1);    background:-webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%),-webkit-linear-gradient(20deg,rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);    -moz-box-shadow:inset 0px 0px 100px rgba(0,0,20,1);    background:-moz-linear-gradient(top,rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%),-moz-linear-gradient(20deg,rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);    display:table;}.retro img{    -webkit-filter:sepia(20%) brightness(10%) contrast(130%);    position:relative;    z-index:-1; }div{    float:left;}</style></head><body><h2>浏览器支持: Chrome 18.0.976.0 (currently canary), Webkit nightly<h2><div><h3>处理前</h3><img src="/d/file/p/2020/01-27/30872922f1822d4c0bcc020d0e32ca71.jpg"></div><div class="retro"><h3>处理后</h3><img src="/d/file/p/2020/01-27/30872922f1822d4c0bcc020d0e32ca71.jpg"></div></body></html>

上一篇：HTML5特效展示，梦幻星空

下一篇：CSS3实现的立体按钮

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注