Rumah > Artikel > hujung hadapan web > css3的过滤效果
css3的过滤效果
- WBOYasal
- 2016-08-04 08:53:141629semak imbas
上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~
好，咱们先把照片后面的白框实现，
<style>
#div1{
/*给div定义宽高和颜色*/
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 /> <div id="div1"> <img src="img/001V28Mwty6Fww02IiNad&690.jpg" alt="css3的过滤效果" > <p>灰色滤镜</p> </div><br /> </body>
把白色的背景框写好之后，接下来就该到滤镜了
首先来第一张，艺术的黑白色
<span style="color: #000000;"> #div1 img{
</span><span style="color: #008000;">/*</span><span style="color: #008000;">把div1里面的图片百分百，等同于相对于在div1里面百分比放大填充</span><span style="color: #008000;">*/</span><span style="color: #000000;">
width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;<br></span>
<span> /*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/</span>
<span style="color: #000000;"> </span>-webkit-filter: grayscale(<span style="color: #800080;">1</span><span style="color: #000000;">); }</span>
第二张照片，额...老照片.
<span style="color: #000000;">#div1 img{
width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
</span>-webkit-filter: sepia(<span style="color: #800080;">1</span><span style="color: #000000;">);
}</span>
第三张照片，反色？我也不太清楚啥颜色
<span style="color: #000000;">#div1 img{
width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
</span>-webkit-filter: hue-<span style="color: #000000;">rotate(200deg);
}</span>
第四张照片，仿佛罩了一层白雾
<span style="color: #000000;">#div1 img{
width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
</span>-webkit-filter: opacity(<span style="color: #800080;">0.5</span><span style="color: #000000;">);
}
</span>
还有一张照片的效果图上没有，是模糊效果代码如下
<span style="color: #000000;">#div4 img{
width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
</span>-webkit-filter: opacity(<span style="color: #800080;">0.5</span><span style="color: #000000;">);
}</span>
好了，我的滤镜分享完毕，接下来美图去了
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：safari cookie设置中文失败Artikel seterusnya：django模板里循环变量<table>里想要两个一行如何控制