CSSのmask実現方法のまとめ
8348 ワード
先端では、後ろのすべての全体を弱め、私たちの弾窓のような特定の要素を強調表示するために、マスク層を実現することがよくあります.では、
これはおそらく私たちが最もよく使う
注意:以上の方法は最もよく使われ、適用されます.以下はいくつかの実装案で、いくつかの簡単な応用に適しています.
ここまで、なぜ
偽元素に比べて、より柔軟な
しかし、スクリーンの幅は固定されていません.
しかし、このやり方には、マスク層のサイズがビューポートに対して大きいという弊害があり、ページがスクロールすると、
また、
mask(マスク層)はどのような方法で実現できますか.<body>
<div class="mask">div>
<div class="dialog">div>
body>方法1:
.mask{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
background:rgba(0,0,0,0.5);
z-index:5999;
}
.dialog{
position: fixed;
top: 50%;
left: 50%;
z-index: 6000;
/* */
}これはおそらく私たちが最もよく使う
maskとdialogを処理する方法ですが、もう一つの問題は、dialogが水平垂直方向に中央に位置する実現であり、私たちは以下のいくつかの方法で実現することができます./*
* ：
* ， ，
*/
.dialog{
margin-top:-dialog /2;
margin-left:-dialog /2;
}
/*
* ：
* CSS3 transform
* IE9+
*/
.dialog{
transform:translate(-50%,-50%);
}
/*
* ：
* CSS3 justify-content、align-items
*/
<div class="dialog-wrap">
<div class="dialog"></div>
</div>
.dialog-wrap{
display: flex;
justify-content: center;
align-items: center;
}
注意:以上の方法は最もよく使われ、適用されます.以下はいくつかの実装案で、いくつかの簡単な応用に適しています.
方法2:
body要素の擬似要素を用いて背景の弊害を弱める:他の必要性のためにbodyの擬似要素がすでに使用されており、jsがbodyにmaskクラスを動的に追加する必要がある.body.mask:after{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
background: rgba(0,0,0,0.5);
z-index: 5999;
}
ここまで、なぜ
dialogの偽元素を直接使わないのか考えてみるかもしれません.これは、dialogの偽元素を直接使用すると、Z の細粒度制御ができないためである.方法3:
偽元素に比べて、より柔軟な
box-shadowも考えられます..dialog{
position: fixed;
top: 50%;
left: 50%;
z-index: 6000;
box-shadow: 0 0 0 500px rgba(0,0,0,0.5);
/* */
}
しかし、スクリーンの幅は固定されていません.
box-shadowの値はどのように制御すればいいのでしょうか.このとき、私たちのビューポート単位vmaxがキラキラ登場します.1vmaxは1vhと1vwの最大値、100vwはビューポート全体の幅、100vhはビューポート全体の高さに等しいため、私たちのニーズを満たす最小値は50vmaxです.box-shadow: 0 0 0 50vmax rgba(0,0,0,0.5);
しかし、このやり方には、マスク層のサイズがビューポートに対して大きいという弊害があり、ページがスクロールすると、
position:absolute;を加えない限り、マスク層の縁が露出し、次に、この方法は視覚的なマスク層にすぎないため、マウスがページの他の部分と相互作用することを阻止することはできない.方法4:
また、
::backdropについては、以下を参照してください.https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop