CSS 이미지 투명/불투명
CSS를 사용하면 투명 이미지를 쉽게 만들 수 있습니다.
참고: CSS Opacity 속성은 W3C의 CSS3 권장 사항의 일부입니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>opacity</title> <style> *{ padding: 0; margin: 0; } body{ padding: 50px; background: url(img/bg.png) 0 0 repeat; } .demo{ padding: 25px; background-color:#000000; opacity: 0.2; } .demo p{ color: #FFFFFF; } </style> </head> <body> <div class="demo"> <p>背景透明,文字也透明</p> </div> </html>
css3의 rgba
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3的rgba</title> <style> *{ padding: 0; margin: 0; } body{ padding: 50px; background: url(img/bg.png) 0 0 repeat; } .demo{ padding: 25px; background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */ background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂,但解析为透明 */ } .demo p{ color: #FFFFFF; } </style> </head> <body> <div class="demo"> <p>背景透明,文字也透明</p> </div> </html>
CSS는 이미지를 흐릿한 상태에서 선명한 상태로 변경합니다. 실제로 이는 주로 CSS 필터를 사용하여 마우스를 올렸을 때 이미지의 투명도를 변경하는 방식으로 이루어집니다. 기본적으로 이미지의 투명도는 70으로 다소 투명하다는 뜻이므로 마우스를 위로 이동하면 이미지의 투명도가 0이 되어 불투명해집니다. CSS 코드는 다음과 같습니다:
<html> <head> <meta charset="utf-8"> </head> <style> .highlightit img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } .highlightit:hover img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } </style> <body> <a href="#" class="highlightit"><img border="0" src="http://pic2016.5442.com:82/2016/0830/6/11.jpg%21960.jpg" width="180px" height="150px"></a> <a href="#" class="highlightit"><img border="0" src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g3/M0A/0F/09/Cg-4WFRplp2IYqiNACQ0TQPPChQAARbPQEM84oAJDRl464.jpg" width="180px" height="150px"></a> </body> </html>