根据css3的filter滤镜更改png照片的色调的示例编码

日期:2020-12-12 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

本方式是根据CSS3滤镜 filter 中的 drop-shadow 将png照片的非全透明一部分转化成随意色调的投射,随后将初始照片掩藏起来,从而做到更改照片色调的目地
先看实际效果图

接下来是编码

<p><strong>初始标志</strong></p>
<i class="icon icon-del"></i>
<p><strong>能够变色的标志</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>

 

.icon {
    display: inline-block;
    width: 20px; height: 20px;
    overflow: hidden;
}
.icon-del {
    background: url(delete.png) no-repeat center;
}
.icon > .icon {
    position: relative;
    left: ⑵0px;
    border-right: 20px solid transparent;
    -webkit-filter: drop-shadow(#0033FF 20px 0);
    filter: drop-shadow(#0033FF 20px 0);
}

留意在其中很重要的1处

border-right: 20px solid transparent;

在Chrome访问器下,假如1个元素的行为主体一部分,不管以何种方法,要是在网页页面中不能见,其drop-shadow是不能见的;实体线一部分哪怕有1像素可见,则drop-shadow彻底可见。

因为大家应用应用 overflow:hidden 掩藏掉了初始标志,因此致使其投射在Chrome访问器上是没法一切正常显示信息的,大家根据加全透明的边框来处理这1点。

总结

到此这篇有关根据css3的filter滤镜更改png照片的色调的文章内容就详细介绍到这了,更多有关CSS更改png照片色调內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!