CSS-путь пути ломает псевдо :: перед порядком стека элемента - PullRequest
Новая
       26

CSS-путь пути ломает псевдо :: перед порядком стека элемента

0 голосов
/ 14 ноября 2018

Я пытаюсь создать эффект матового стекла на непрямоугольном элементе, но это не получается. У меня странная проблема, которую я не могу обернуть вокруг ...

Эффект матового стекла легко реализовать, установив фиксированное фоновое изображение на тело документа, добавив частично прозрачный цвет фона к элементу и создав псевдоэлемент :: before с тем же фиксированным фоновым изображением и применив фильтр размытия. Вот так: 

  body {
    background: url(bg-lanterns.jpg) 0 / cover fixed;
  }

  main {
    position: relative;
    margin: 1rem auto;
    padding: 1rem;
    height: 600px;
    width: 800px;
    background: rgba(255,255,255,0.7);
  }

  main::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(bg-lanterns.jpg) 0 / cover fixed;
    filter: blur(10px);
  }

frosted glass effect

Создать непрямоугольный элемент также легко, используя clip-path, например: 

  main {
    position: relative;
    margin: 1rem auto;
    padding: 1rem;
    height: 600px;
    width: 800px;
    background: rgba(255,255,255,0.7);
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  }

non-rectangular element

Но попытка объединить эти два эффекта нарушает порядок наложения и заставляет элемент :: before появляться над белым фоном.

broken

Я получаю одинаковый результат в Chrome и Firefox, поэтому мне интересно, является ли это ожидаемым поведением, и я просто делаю что-то не так ... Кто-нибудь может пролить свет на то, что здесь происходит?

Вот живая демонстрация: 

      body {
        background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
      }
      
      main {
        position: relative;
        margin: 1rem auto;
        padding: 1rem;
        height: 600px;
        width: 800px;
        background: rgba(255,255,255,0.7);
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      }
      
      main::before {
        content: '';
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 1rem;
        background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
        filter: blur(10px);
      }
<main></main>

1 Ответ

0 голосов
/ 14 ноября 2018

В соответствии со спецификацией для clip-path:

Вычисленное значение, отличное от нуля, приводит к созданию контекста стека [CSS21] так же, как непрозрачность CSS [CSS3COLOR] длязначения, отличные от 1.

Мне удалось добиться желаемого эффекта, добавив белый цвет к псевдоэлементу :: after и обрезав оба псевдоэлемента вместо самого элемента. 

      body {
        background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
      }
      
      main {
        position: relative;
        margin: 1rem auto;
        height: 600px;
        width: 800px;
        display: flex;
        flex-flow: column nowrap;
        align-content: center;
        align-items: center;
        justify-content: center;
      }

      main::before,
      main::after {
        content: '';
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      }
      
      main::before {
        background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
        filter: blur(10px);
      }
      
      main::after {
        background: rgba(255,255,255,0.7);
      }
<main> <span> test </span> </main>
...