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>

지속적인 학습

새로운 파일

<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>

제출하다 코드 재설정

자동운전