CSS シークレット ガーデン: すりガラス効果_html/css_WEB-ITnose

『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@範囲、@彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

質問

半透明色の応用例の 1 つは、背景として使用することです。写真や複雑な色の背景に対するコントラストを下げることで、テキストの読みやすさを向上させます。結果は非常に効果的ですが、特に透明度が非常に低い色や非常に乱雑な背景の場合は、まだうまく読み取れません。たとえば、以下の画像の効果を見てください:

メイン要素の背景は半透明で、HTML は次のとおりです:

<main>    <blockquote>        “The only way to get rid of a temptation[…]”        <footer>—            <cite>                Oscar Wilde,                The Picture of Dorian Gray            </cite>        </footer>    </blockquote></main>

CSS コードは次のとおりです (無関係な部分は繰り返しません) content):

body {    background: url("tiger.jpg") 0 / cover fixed;}main {    background: hsla(0,0%,100%,.3);}

効果は上に示したとおりです。

ご覧のとおり、テキストの背後にある画像が非常に乱雑で、背景色の不透明度が 25% しかないため、テキストの内容は非常に読みにくくなっています。もちろん、背景色のアルファ パラメーターの値を増やすことで可読性を向上させることはできますが、その効果はそれほど興味深いものではない可能性があります。

背景色のアルファ値を増やすと、読みやすさの問題は解決しますが、デザインがまったく面白くなくなります。

従来の印刷デザインでは、この問題は通常、テキスト コンテンツが含まれる写真の領域の背景をぼかすことで解決されます。背景がぼやけると乱雑さが軽減されるため、上のテキストの読みやすさも向上します。ファジィ計算は高価であるため、Web および UI デザインでこのテクノロジを使用すると、リソースの消費量が法外に高くなります。ただし、GPU の改善とハードウェア アクセラレーションが一般的になるにつれて、ブラー エフェクトの使用は非常に一般的になりました。過去数年間、このテクノロジは、Mac OS X だけでなく、Microsoft Windows や Apple iOS の新しいバージョンにも採用されてきました。

背景をぼかした半透明の UI は、ぼかしによるリソースの消費が少なくなったため、ここ数年で非常に一般的になりました (左は Apple iOS 8.1、右は Apple OS X Yosemite)。

CSS では、blur() フィルターを使用して要素をぼかす効果を作成できます。これは本質的に、SVG ぼかしフィルター プリミティブの対応するハードウェア アクセラレーション バージョンです。ただし、この例に Blur() フィルターを直接適用すると、要素全体がぼやけて、さらに読みにくくなります。

要素に Blur() フィルターを適用すると、結果はさらに悪くなります

要素の背景 (つまり、要素の背後にある背景の一部) にのみフィルターを適用する方法はありますか?

解決策

要素に値がfixedのbackground-attachment属性がある場合は問題ないかもしれませんが、少し注意が必要です。要素を直接ぼかすことはできないため、要素の後ろに配置された疑似要素に適用して、疑似要素の背景を の背景とシームレスに一致させることができます。

まず、疑似要素を追加し、絶対位置をすべて 0 に設定して、

要素全体を完全にカバーするようにします。

main {    position: relative;    /* [Rest of styling] */}main::before {    content: '';    position: absolute;    top: 0; right: 0; bottom: 0; left: 0;    background: rgba(255,0,0,.5); /* for debugging */}

混乱を引き起こす可能性があるため、背景を固定しないこともできます。

また、作業中のコンテンツを確認できるように、半透明の赤い背景を適用しました。そうしないと、透明な (つまり、目に見えない) 要素を扱うときにデバッグが難しくなります。以下に示すように:

テキスト上の擬似要素のぼかしオーバーレイ

擬似要素はコンテンツの真上に配置され、ぼかされます。 z-index: -1; を追加することで要素の下に配置できます。

子要素を親の下に移動するために負の z-index 値を使用する場合は注意してください。親要素が別の要素内に背景としてネストされている場合、子要素も他の要素の下に移動されます。

z-index: -1; を使用して、擬似要素を親要素の下に移動します

ここで、半透明の赤い背景を削除し、背景と一致する画像を使用します。 、または擬似要素を直接分割するためのルール。もうぼかしてもいいですか？これを試してみてください:

body, main::before {    background: url("tiger.jpg") 0 / cover fixed;}main {    position: relative;    background: hsla(0,0%,100%,.3);}main::before {    content: '';    position: absolute;    top: 0; right: 0; bottom: 0; left: 0;    filter: blur(20px);}

main::before で背景:継承を使用してみてはいかがでしょうか?この場合、bodyではなくmainの背景を継承するため、疑似要素は半透明の白い背景のみを取得します。

キャプション: 疑似要素のぼかしは可能ですが、エッジのぼかしが少ないため、すりガラス効果にも少し影響があります

上の写真に示すように、ほぼ完成しました。中央のぼかしは完璧に見えますが、端付近のぼかしが少なくなります。これは、ぼかし半径により、単色のぼかしでカバーされる領域が減少するためです。疑似要素に赤い背景を適用すると、何が起こっているかを理解するのに役立ちます。

图注：添加一个红色背景可以帮助我们理解

为了规避这个问题，我们让伪元素至少比它的容器的尺寸大 20px （和模糊半径的值相等），通过应用一个 -20px 或更小的 margin 值来让它保持在一个安全的区域内，因为不同的浏览器可能会使用不同的模糊算法。如图所示:

这修复了边缘处褪色模糊的问题，但是现在在我们的容器外边也有一些模糊，这使得它看起来像污迹而不像磨砂。幸好，这个问题也容易解决：我们只要应用为 main 应用 overflow: hidden; ，把多余的模糊剪掉即可。最后的代码如下所示：

body, main::before {    background: url("tiger.jpg") 0 / cover fixed;}main {    position: relative;    background: hsla(0,0%,100%,.3);    overflow: hidden;}main::before {    content: '';    position: absolute;    top: 0; right: 0; bottom: 0; left: 0;    filter: blur(20px);    margin: -30px;}

效果如下所示：

修复边缘处淡去的模糊，但是我们的元素外边仍然存在模糊

现在我们页面的可读性已经变得比刚开始的时候好多了，外观也非常优雅。这种效果的降级是否优雅仍值得商榷。如果不支持滤镜，我们看到的就是本节开头的那个效果。我们可以通过调整背景颜色的透明度来让降级效果的可读性更好。