1

CSSで前景画像を背景画像に類似させて偽造する方法はありますか？div内の他の要素の背後に存在する代わりに、要素内のすべてを覆い隠します。

4

4 に答える 4

6

疑似要素を使用します（IE≤7::beforeでは機能しません）：

.obscured{     
    position: relative;
}
.obscured::before{
    position: absolute; /* maximize the pseudo-element */
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color:rgba(0,0,0,0.3); /* use background-image here */
    content: " "; /* it needs actual content, an empty space is enough */
}

参照：

于 2012-06-15T22:08:25.497 に答える
0

途中で、すべてのタグをカバーするために、絶対位置を使用することです。イベントでこれをトリガーしたいと思います。したがって、イベントがトリガーされると、前景を除くすべての要素をフロートさせることができます

于 2012-06-15T22:07:41.490 に答える
0

同じサイズの子要素を絶対位置でオーバーレイし、それにbg画像を追加できます。

画像の代わりにbgカラーを使用したjsfiddleの例。FF、Chrome、IE9でテスト済み。

于 2012-06-15T22:20:38.743 に答える
0

1行のcssを使用できます> backdrop-filter: blur(1rem);：

<div class="some-background">
  <div style="backdrop-filter: blur(1rem);"></div>
</div>
于 2021-04-20T04:26:29.330 に答える