mix-blend-режим нарушен, когда html имеет " перспективу"

применение "перспектива" до HTML-код элемент мой mix-blend-mode кажется, игнорируется Firefox.

html {
    perspective: 800px; /* causing the issue */
}

div {
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

в чем проблема? Я использую Firefox 40.

http://codepen.io/Type-Style/pen/oXJbRE

12
blending css css-transforms

2 ответов

похоже, вы можете достичь ожидаемого результата, просто добавив режим смешивания в html-элемент.

Пример Работающего

html {
  background-color: #111;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/210px-W3C%C2%AE_Icon.svg.png);
  background-repeat: no-repeat;
  perspective: 800px;
  mix-blend-mode: screen; /*see change here*/
}
div {
  height: 100px;
  line-height: 100px;
  font-size: 40px;
  color: #fff;
  background: linear-gradient(to bottom, #000, orange);
  mix-blend-mode: screen;
}
<div>Some Text</div>
<div>Some more Text</div>

Я не совсем уверен, что вызвало проблему, но как перспектива, так и mix-blend-mode создадут новый контекст укладки, поэтому это может иметь какое-то отношение к этому...

2

несмотря на то, что при определении perspective свойство для элемента, это ребенок элементы, которые получают в перспективе, не сам элемент, ты еще должны вызвать ваш дочерний элемент и назначить желаемый в CSS перспективные свойства к нему, чтобы он работал в кросс-браузере. Приведенные ниже коды работают на 100% в любом существующем браузере;

html {
    background-color: #111;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/210px-W3C%C2%AE_Icon.svg.png);
    background-repeat: no-repeat;  
} 

div {
    height: 100px; line-height: 100px;
    font-size: 40px;
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

.background-image{
    perspective: 50px; // calling on child element and applying the perspective
}

что было проблема?

определение перспективы свойства под HTML тег вызывает проблемы для совместимости кросс-браузеров, так как у вас может быть множество элементов под вашим основным html тег, и браузер может не различать, как и к какому элементу его применять. Верно, что свойство perspective влияет только на 3D-преобразованные элементы, но это не гарантия того, что браузеры обнаружат и применят его к изображению, указанному в качестве основного фон. Надеюсь, это помогло.

1