透過png
基本的な方法のポイントは下のjpeg画像はCSS→backgruond-imageで読み込み、
上に重なる透明pngはhtmlファイルにコーディング。
けどメナードのサイトのソースを見ると、両方ともCSS→backgruond-imageで重ねているので、こちらの方法は分析する必要有り！
文字を重ねない透過png
htmlソース
<?xml version"1.0" encording="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>透過pngの練習2</title>
<link href="index1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<img src="images/02266000309.png" width="640" height="640" alt="png" />
</div>
</body>
</html>
CSSソース
@charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background-color:#CCCCCC;
}
#container {
width: 640px;
height: 640px;
background-image:url(images/02266000309.jpg);
background-repeat: no-repeat;
}
*html #container{
width: 640px;
height: 640px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=images/02266000309.png);
}
*html #container img{
display: none;
}
文字を重ねるタイプの透過png(メナード)
htmlソース
<?xml version"1.0" encording="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>透過pngの練習3</title>
<link href="index3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="box">
<img src="images/box.png" width="296" height="309" alt="box" />
</div>
<h1>みんなで跳ねよう！</h1>
<div id="type">
<p>みんなで元気に仕事しましょう！ みんなで元気に仕事しましょう！ みんなで元気に仕事しましょう！ みんなで元気に仕事しましょう！ みんなで元気に仕事しましょう！ みんなで元気に仕事しましょう！ </p>
</div>
</div>
</body>
</html>
CSSソース
@charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background-color:#CCCCCC;
}
#container {
width: 640px;
height: 640px;
background-image:url(images/02266000309.jpg);
background-repeat: no-repeat;
}
#box {
position:relative;
top: 300px;
width:296px;
height: 309px;
}
h1 {
position: relative;
top: 0;
left: 10px;
}
#type {
position:relative;
top: 10px;
width: 296px;
height:200px;
}
*html #box {
width: 296px;
height: 309px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=images/box.png);
}
*html #box img {
display: none;
}
