仕上がりイメージは斯うです。
最終出力結果
先ずは最下層に背景画像があります。 上の例では神社の写真が其れに当たります。 其の上に帯がのり、其の上、左方に白のアイコン、右方に白のフォント文字が乗ります。 アイコンとフォント文字を包含した帯は元は紺色ですが、 乗算で其のまた背景画像に重ねられており、 唯に単色の不透過色の場合とは異なる深みを感じさせるイメージを醸し出しています。 此れを皆、CSSのみで実現したく試行錯誤しました。
初手
参考のために唯に単色の不透過の紺色の帯の場合を下に貼り置きましょう。 随分イメージが異なるのがはっきりします。