テキストの背景色を白（#fff）に指定。
背景画像に対し、display: inline-blockとmargin: 5%（上下左右）で余白を指定。
背景色（疑似BOX）の幅は『全体幅－左右margin（5%×2）』で90%を指定。
文字の読みやすさを考慮し、背景色内にpadding: 10pxで余白を指定。
背景色の透過無し。
【タグ】
＜div style="background-image: url(画像のURL);"＞＜div style="display: inline-block; width:90%; background-color:#fff; margin: 5%; padding: 10px;"＞ここにテキスト＜/div＞＜/div＞
＜＞は半角に直して下さい。

テキストの背景色を白（rgbで、255 255 255）に指定。
背景画像に対し、display: inline-blockとmargin: 5%（上下左右）で余白を指定。
背景色（疑似BOX）の幅は『全体幅－左右margin（5%×2）』で90%を指定。
文字の読みやすさを考慮し、背景色内にpadding: 10pxで余白を指定。
背景色をrgb(255 255 255/0.5)で指定し、50%透過。
opacityを使用すると背景色だけでなく、文字色も透過されます。
背景画像のみを透過（文字色はそのままで）する方法もありますが、タグが少々面倒なのと
初めから透過した画像を、用意すれば事足りると考えるので紹介は割愛。
又、背景画像を敷き詰めた場合、個人的にはコチラの方がデザイン性が高いかな？と考えますが
透過させた背景色で、背景画像を透過させた風にすることもできます。（P3で紹介）
【タグ】
＜div style="background-image: url(画像のURL);"＞＜div style="display: inline-block; width:90%; background-color: rgb(255 255 255/0.5); margin: 5%; padding: 10px;"＞ここにテキスト＜/div＞＜/div＞
＜＞は半角に直して下さい。