css 滤镜效果学习

最新推荐文章于 2024-11-17 20:40:20 发布

phh1989

最新推荐文章于 2024-11-17 20:40:20 发布

阅读量519

点赞数

文章标签： css filter div

本文链接：https://blog.csdn.net/phh1989/article/details/6250641

版权

<html> <head> <mce:style></mce:style><style mce_bogus="1">div { width:160px; height:120px; }</style> </head> <body> Alpha: <div style="filter:alpha(Opacity=20)" mce_style="filter:alpha(Opacity=20)"> <img src="/i/eg_landscape.jpg" mce_src="i/eg_landscape.jpg" width="160" height="120" /> </div> Gray: <div style="filter:gray()" mce_style="filter:gray()"> <img src="/i/eg_landscape.jpg" mce_src="i/eg_landscape.jpg" width="160" height="120" /> </div> Invert: <div style="filter:invert()" mce_style="filter:invert()"> <img src="/i/eg_landscape.jpg" mce_src="i/eg_landscape.jpg" width="160" height="120" /> </div> Xray: <div style="filter:xray()" mce_style="filter:xray()"> <img src="/i/eg_landscape.jpg" mce_src="i/eg_landscape.jpg" width="160" height="120" /> </div> Mask: <div style="position:absolute;left:10;top:610;"> <img src="/i/eg_landscape.jpg" mce_src="i/eg_landscape.jpg" width="160" height="120" /> </div> <div style="position: absolute; left: 10; top: 610; filter: mask(color=#ffffff); width: 160; height: 120"> <h2>The mask value makes the text transparent</h2> </div> </body> </html>