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>
次のセクション