透過・ぼかしの代替
地図のような騒がしい背景の上のガラス質感パネル。prefers-reduced-transparency: reduce では不透明＋境界線に切り替える。模擬トグルで見比べられる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 透過とぼかしは背景次第で文字のコントラストが変わる。不透明版を先に作り、透過は上乗せの装飾として足す
- prefers-reduced-transparency: reduce では backdrop-filter を外し、背景を不透明に・境界線を1本足す
- 透過を減らしたときに影だけ残すとパネルが浮いて見えない。境界線か薄い地色で区切りを作り直す
- backdrop-filter はスクロール中の描画が重い。長いリストの上に置くなら、減らす設定に関係なく再考する
コード（コピーして使えます）
<div class="rtp-scene" id="rtp-scene">
<div class="rtp-bg" aria-hidden="true">
<span class="rtp-road rtp-r1"></span><span class="rtp-road rtp-r2"></span><span class="rtp-road rtp-r3"></span>
<span class="rtp-pin rtp-p1"></span><span class="rtp-pin rtp-p2"></span><span class="rtp-pin rtp-p3"></span>
<span class="rtp-word rtp-w1">港区</span><span class="rtp-word rtp-w2">元町</span><span class="rtp-word rtp-w3">海岸通</span>
</div>
<div class="rtp-panel">
<span class="rtp-kicker">今夜の宿</span>
<strong>海辺のホテル ミナト</strong>
<span class="rtp-price">¥12,800 / 泊・朝食つき</span>
<button type="button" class="rtp-cta">空室を見る</button>
</div>
<div class="rtp-ctl">
<button type="button" id="rtp-toggle" aria-pressed="false">透過を減らす（模擬）</button>
</div>
<div class="rtp-band"><span class="rtp-tag">状態</span><span id="rtp-msg">透過あり: backdrop-filter: blur(14px)・白 62%。文字の後ろに道路の線が透ける</span></div>
</div>