`:xr-overlay` 擬似クラス (CSS)

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more browser support for this feature? Tell us why.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

:xr-overlay は CSS の擬似クラスで、WebXR DOM オーバーレイモジュールで定義されており、没入型の AR または VR 環境でウェブページが表示されている際に、DOM オーバーレイ要素に一致します。

構文

css

:xr-overlay {
  /* ... */
}

:xr-overlay 擬似クラスは、DOM オーバーレイを使用した没入型セッションの期間中、オーバーレイ要素に一致します。

オーバーレイ要素はバックドロップルートです。DOM のオーバーレイ要素またはその子要素に対する backdrop-filter の効果は、AR カメラの画像（該当する場合）や、没入型セッションの XRWebGLLayer に描画されるレンダリング済みコンテンツを変更することはありません。

オーバーレイ要素自体は、その固定された position により、重ね合わせコンテキストとなります。オーバーレイ要素の親要素（存在する場合）の重ね合わせコンテキストは、没入型セッションのディスプレイには描画されません。

メモ: マルチディスプレイシステムでは、オーバーレイ要素の親要素や同階層の要素の重ね合わせコンテキストが、別個のディスプレイに表示されることがあります。

この例では、オーバーレイを半透明の黒として定義し、オーバーレイの背後にあるコンテンツが部分的に見えるようにしています。コンテンツと背景の間に十分なコントラストを実現するため、color を white に設定しています。

css

:xr-overlay {
  background-color: rgb(0 0 0 / 0.5);
  color: white;
}

この例では、:xr-overlay セレクターを使用して、XR DOM オーバーレイ内の <button> 要素にスタイルを設定します。

css

:xr-overlay button {
  background-color: white;
  color: black;
}

仕様書
WebXR DOM Overlays Module # selectordef-xr-overlay

このページは MDN の貢献者によって 2026年9月29日に最終更新されました。