0

CSS3 で新しいガラス モーフィズム効果を生成する方法を探していました。残念ながら、私はそれを実現するこの記事を見つけました。最初の方法では、記事は次のようになります (私は同じ構造とプロパティでこのコードを書きました)。

body {
    min-height: 100vh;
    background: url(./bg.jpg) no-repeat; /*<------ check that I'm using a background image*/
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: fixed; /*<------ This is the most important part*/
}

.contenedor {
    width: 500px;
    border-radius: 10px;
    height: 400px;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    background: inherit; /*<------- Here the ".contenedor" element inherits its parent's background*/
  z-index: 2;
}
.contenedor::before {
  z-index: -1;
    content: "";
    background: inherit;
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 0px 2000px rgba(255, 255, 255, 0.5); /*<------- Here the magic happens making a blur inside */
    filter: blur(10px);
}

この HTML では:

<body>
  <div class="contenedor">
    TEXT INSIDE
  </div>
</body>

さて、背景のある要素background-attachmentの背景を維持するための仕組みがわかりません。.contenedorinherit

background:inheritが親からすべての背景プロパティを継承することはわかっていますが、

{
    ...
    background: url(./bg.jpg) no-repeat; /*<------ check that I'm using a background image*/
    background-size: cover;
    background-attachment: fixed; /*<------ This is the most important part*/
    ...
}

代わりにinherit、それは動作しません。PDT: もちろん::before、背景を実現するための疑似クラスを理解しています。Mozilla Firefox と互換性がないため、2 番目のメソッドの代わりに最初のメソッドを使用しています。

皆さんありがとう、そして私の下手な英語について申し訳ありません

4

0 に答える 0