0
私はこの投稿を見つけましたCSS-only Acrylic Material from Fluent Design System素晴らしいですが大きな問題があります。 私は次のコードが必要とされているので、それはdoesn't、もう働か1 background image、より多く使用するようにしてください：流暢なデザインシステムCSS - 改善
body, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}
しかし、私は、ページセクションごとに異なる背景画像を使用したい：
body {
background: #FFF;
}
.hero {
background-image: url(img1.jpg);
}
.about {
background-image: url(img2.jpg);
}
<body>
<div class="hero">
<h1>I´m a hero</h1>
<a href="#section">Scroll down link</a>
</div>
<div id=section class="about"><p>Section has different background image <span class="acrylic">but this content is on the Acrylic Fluent Design surface<span/></p><div/>
</body>
だから私は、ユニバーサルデザインとしてのアクリル表面を必要とする：私はこのように、ページ上の任意の場所にアクリル素材の効果を使用できるようにする必要があります
元の投稿の制限なしに誰かがそれを行う方法を知っているなら、私は本当にどんな助けにも感謝します。 ありがとうございました（そして、私の悪い書き込みのため申し訳ありません - - 私はないネイティブスピーカーので、私はあなたが私は:)書いたすべてを理解してほしい）
はい、正しく理解しています。しかし、私があなたが言うことをやろうとしたとき、それはちょうどうまくいきませんでした。 .acrylic divは、（使用されたrgbaのために）半透明でぼやけないようになりました。いくつかのデモをしてください。あなたは私のコード作業をするためにここにいないと知っていますが、私はあなたに尋ねなければなりません。 –
ああ、私は今参照してください。あなたが少し参考にした質問を読みました！参照された質問 – mwilshire
から編集されたスニペットで更新を参照してください。これは機能するので、私は答えとしてそれを作ったが、パディングを変更すると再び壊れてしまう。さまざまな種類の使用法に合わせて柔軟にすることは可能ですか？私はセクションでの使用法を尋ねたが、ページの他の場所（ナビ、テキスト、ボタンなど）でも使用できると思う。私は流暢な設計のためのシンプルなフレームワークやテンプレートを作ろうとしているので、できるだけ多くの柔軟で汎用的な解決策が必要です。それはできますか？それとも、CSSの大きな限界があるのでしょうか？もう一度私を助けることができたら、本当に感謝します。とにかくありがとうございました。 –