子 div は親スタイルをオーバーライドしてポータルとして機能できますか?
P粉821231319
P粉821231319 2024-03-20 09:07:03
0
1
321

子 div を含む親 div を作成したいと考えています。親スタイルは

です
幅: 100vw;
  高さ: 100vh;
  位置: 固定;
  背景色: rgb(0 0 0 / 0.25);
  背景フィルター: ぼかし(2px);
  z インデックス: 8888;
  トップ: 0;
  左: 0;

サブスタイルは

です
背景色: 透明;
  幅: 200ピクセル;
  高さ: 200ピクセル;
  位置: 絶対;
  左: 400ピクセル;
  上: 400px;

子要素をポータルのように動作させ、その領域に親 div のぼかしと背景色を削除する方法はありますか?

tl;博士号 次のようなものです

P粉821231319
P粉821231319

全員に返信(1)
P粉043432210

### - 編集 - ###

子 div の背景フィルターを復元する方法が質問の場合は、

を使用できます。

背景フィルター: なし;

 ただし、このプロパティを親の親から継承したい場合は、JavaScript でこれを行う必要があります 

element.style.backdropFilter = element.parentNode.parentNode.style.backdropFilter;

CSS でこれを行う 3 つの方法

1 相対 div 位置を使用します

div : { 幅: 100vw; 高さ: 100vh; 位置: 固定; 背景色: rgb(0 0 0 / 0.25); 背景フィルター: ぼかし(2px); 背景クリップ: テキスト; z インデックス: 8888; トップ: 0; 左: 0; } div div { 背景色: 透明; 幅: 200ピクセル; 高さ: 200ピクセル; 位置: 絶対; 左: 400ピクセル; 上: 400ピクセル; }

2 使用 ID

#メインID : { 幅: 100vw; 高さ: 100vh; 位置: 固定; 背景色: rgb(0 0 0 / 0.25); 背景フィルター: ぼかし(2px); 背景クリップ: テキスト; z インデックス: 8888; トップ: 0; 左: 0; } #サブディビジョンID { 背景色: 透明; 幅: 200ピクセル; 高さ: 200ピクセル; 位置: 絶対; 左: 400ピクセル; 上: 400ピクセル; }

3 クラスの使用

.メインID : { 幅: 100vw; 高さ: 100vh; 位置: 固定; 背景色: rgb(0 0 0 / 0.25); 背景フィルター: ぼかし(2px); 背景クリップ: テキスト; z インデックス: 8888; トップ: 0; 左: 0; } .subDivClass { 背景色: 透明; 幅: 200ピクセル; 高さ: 200ピクセル; 位置: 絶対; 左: 400ピクセル; 上: 400ピクセル; }

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート