「Edge」の promonational をページで使う

画像サイズ（縦横比率）を揃える
class=”three-column”　⇒　.item {float: left; display: inline-block; width: 33.3%; padding: 0 0.5%;}　

Tea time

Lunch

Dinner

 

画像に文字を載せる

　　position: relative;　相対位置
　　position: absolute;　絶対位置

縦横の数値に対して
position: relative; width:100%; height:450px; background:url(画像リンク) no-repeat scroll top center;

文字ブロックの位置
position: absolute; top:45%; left:40%; background-color: rgba(255, 255, 255, 0.8); font-size: 20px; color: #000000; ine-height: 18px; padding: 8px 12px;