TMLとCSSだけで画像の上に別の画像のと言う明度を調整して配置してみます。
用意した背景用jpg画像（4000×750px）
上に乗せるpng画像（640×480px）
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像の重ね合わせ</title>
<style>
* {
margin: 0px;
padding: 0px;
}
div#mainbox {
width: 1000px;
height: 750px;
margin: 0px auto;
}
.container {
position: relative;
width: 640px; /* 配置する画像の幅 */
height: 480px; /* 配置する画像の高さ */
}
.overlay {
position: absolute;
top: 78.125%;
left: 78.125%;
/*
元画像と配置画像の関係は、センター合わせにした場合
※（元画像サイズ/2）/配置画像サイズ
背景画像1000×750px
配置画像640×480px
幅(1000/2)/640=78.125%
高さ(750/2)/480=78.125%
※実はこの計算に一番苦労しました。
*/
transform: translate(-50%, -50%);
opacity: 0.5;
/* 透明度を設定。
1.0で完全に不透明、0.0で完全に透明になる。 */
z-index: 1;
/* 重ねる画像の表示順序を指定。
他の要素より上に表示するため、z-indexを設定。 */
}
</style>
</head>
<body bgcolor="black">
<div id="mainbox">
<div class="container">
<img src="links/azalea.jpg" alt="Base Image">
<img src="links/funny_fish.png"
alt="Overlay Image" class="overlay">
</div>
</div>
</body>
</html>
<!-- index.html -->
処理結果はこんな感じです。ちょっとキモイ。
