Heim >Web-Frontend >HTML-Tutorial >如何利用CSS实现图片的透明效果_html/css_WEB-ITnose

如何利用CSS实现图片的透明效果_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:36:24943Durchsuche

如何利用CSS实现图片的透明效果:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
在网页的实际应用中,往往需要设置图片的透明度,下面就简单介绍一下如何实现此效果。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.first image{  filter:alpha(opacity=50);  -moz-opacity:0.5;  opacity:0.5;}</style></head><body><div class="first"><img src="mytest/demo/bordera.jpg" alt="战斗机"/></div><div class="second"><img src="mytest/demo/bordera.jpg" alt="战斗机"/></div></body></html>

以上代码实现图片的透明度效果,大家也可以参阅CSS如何设置div背景透明度且兼容性良好一章节了解更多相关透明度的内容

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn