Мобильная версияВ примере MDN I связано, они используют эллипс SVG и SVG Lineargradient определения для наполненных градиентными эллипами. Я ничего не думал об этом изначально, за исключением того, что было немного странно использовать SVG в демонстрации. Игнорирование изоляции: изолят , которая является первой половиной демонстрации («смешивание в изоляции»), я использовал глобальные примеры смешивания как то, что, как я ожидаю, что я считаю, что это не так. However, the output I got from this method was as shown:
When compared to the example from MDN, there is a Четкая разница в поведении смешивания:
(например, демо), я получаю поведение, наблюдаемое на втором скриншоте. class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">
Код: Выделить всё
.ellipse {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 140px;
transform: translate(-50%, -50%);
border-radius: 50% / 50%;
}
.ellipse.red {
background: linear-gradient(to right, #ff0000, #ffffff);
transform: translate(-50%, -50%) rotate(-30deg);
}
.ellipse.green {
background: linear-gradient(to right, #00ff00, #ffffff);
transform: translate(-50%, -50%) rotate(90deg);
}
.ellipse.blue {
background: linear-gradient(to right, #0000ff, #ffffff);
transform: translate(-50%, -50%) rotate(210deg);
}
.grid {
width: 100%;
display: flex;
}
.row {
display: flex;
flex: 1 auto;
flex-direction: row;
flex-wrap: wrap;
height: auto;
}
.col {
display: flex;
flex: 1 auto;
flex-direction: column;
height: auto;
}
.cell {
margin: 0.5em;
padding: 0.5em;
background-color: white;
overflow: hidden;
text-align: center;
}
.container {
position: relative;
background:
linear-gradient(to right, black 0%, transparent 50%, white 100%),
linear-gradient(to bottom, yellow 0%, magenta 50%, cyan 100%);
width: 150px;
height: 150px;
margin: 0 auto;
}
.R {
transform-origin: center;
transform: rotate(-30deg);
fill: url("#red");
}
.G {
transform-origin: center;
transform: rotate(90deg);
fill: url("#green");
}
.B {
transform-origin: center;
transform: rotate(210deg);
fill: url("#blue");
}
.normal .item {
mix-blend-mode: normal;
}
.multiply .item {
mix-blend-mode: multiply;
}
.screen .item {
mix-blend-mode: screen;
}
.overlay .item {
mix-blend-mode: overlay;
}
.darken .item {
mix-blend-mode: darken;
}
.lighten .item {
mix-blend-mode: lighten;
}< /code>
& l t ; d e f s & g t ; < b r / > & l t ; l i n e a r G r a d i e n t i d = " r e d " & g t ; < b r / > & l t ; s t o p o f f s e t = " 0 " s t o p - c o l o r = " # f 0 0 " / & g t ; < b r / > & l t ; s t o p o f f s e t = " 1 0 0 % " s t o p - c o l o r = " # f f f " / & g t ; < b r / > & l t ; / l i n e a r G r a d i e n t & g t ; < b r / > & l t ; l i n e a r G r a d i e n t i d = " g r e e n " & g t ; < b r / > & l t ; s t o p o f f s e t = " 0 " s t o p - c o l o r = " # 0 f 0 " / & g t ; < b r / > & l t ; s t o p o f f s e t = " 1 0 0 % " s t o p - c o l o r = " # f f f " / & g t ; < b r / > & l t ; / l i n e a r G r a d i e n t & g t ; < b r / > & l t ; l i n e a r G r a d i e n t i d = " b l u e " & g t ; < b r / > & l t ; s t o p o f f s e t = " 0 " s t o p - c o l o r = " # 0 0 f " / & g t ; < b r / > & l t ; s t o p o f f s e t = " 1 0 0 % " s t o p - c o l o r = " # f f f " / & g t ; < b r / > & l t ; / l i n e a r G r a d i e n t & g t ; < b r / > & l t ; / d e f s & g t ; < b r / > & l t ; e l l i p s e c l a s s = " i t e m R " c x = " 7 5 " c y = " 7 5 " r x = " 2 5 " r y = " 7 0 " & g t ; & l t ; / e l l i p s e & g t ; < b r / > & l t ; e l l i p s e c l a s s = " i t e m G " c x = " 7 5 " c y = " 7 5 " r x = " 2 5 " r y = " 7 0 " & g t ; & l t ; / e l l i p s e & g t ; < b r / > & l t ; e l l i p s e c l a s s = " i t e m B " c x = " 7 5 " c y = " 7 5 " r x = " 2 5 " r y = " 7 0 " & g t ; & l t ; / e l l i p s e & g t ; < b r / > & l t ; / s v g & g t ; < b r / > & l t ; d i v & g t ; < b r / > B l e n d i n g u s i n g H T M L e l e m e n t s < b r / > & l t ; d i v c l a s s = " g r i d " & g t ; < b r / > & l t ; d i v c l a s s = " c o l " & g t ; < b r / > & l t ; d i v c l a s s = " r o w " & g t ; < b r / > & l t ; d i v c l a s s = " c e l l " & g t ; < b r / > n o r m a l < b r / > & l t ; d i v c l a s s = " c o n t a i n e r n o r m a l " & g t ; < b r / > & l t ; d i v c l a s s = " g r o u p " & g t ; < b r / > & l t ; d i v c l a s s = " i t e m " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e - c o n t a i n e r i t e m n o r m a l " & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e r e d " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e g r e e n " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e b l u e " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " c e l l " & g t ; < b r / > m u l t i p l y < b r / > & l t ; d i v c l a s s = " c o n t a i n e r m u l t i p l y " & g t ; < b r / > & l t ; d i v c l a s s = " g r o u p " & g t ; < b r / > & l t ; d i v c l a s s = " i t e m " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e - c o n t a i n e r i t e m n o r m a l " & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e r e d " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e g r e e n " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e b l u e " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " c e l l " & g t ; < b r / > d a r k e n < b r / > & l t ; d i v c l a s s = " c o n t a i n e r d a r k e n " & g t ; < b r / > & l t ; d i v c l a s s = " g r o u p " & g t ; < b r / > & l t ; d i v c l a s s = " i t e m " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e - c o n t a i n e r i t e m n o r m a l " & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e r e d " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e g r e e n " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e b l u e " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " c e l l " & g t ; < b r / > s c r e e n < b r / > & l t ; d i v c l a s s = " c o n t a i n e r s c r e e n " & g t ; < b r / > & l t ; d i v c l a s s = " g r o u p " & g t ; < b r / > & l t ; d i v c l a s s = " i t e m " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e - c o n t a i n e r i t e m n o r m a l " & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e r e d " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e g r e e n " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e b l u e " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " c e l l " & g t ; < b r / > l i g h t e n < b r / > & l t ; d i v c l a s s = " c o n t a i n e r l i g h t e n " & g t ; < b r / > & l t ; d i v c l a s s = " g r o u p " & g t ; < b r / > & l t ; d i v c l a s s = " i t e m " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e - c o n t a i n e r i t e m n o r m a l " & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e r e d " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e g r e e n " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " e l l i p s e b l u e " & g t ;
overlay
Blending using SVG elements
normal
multiply
darken
screen
lighten
overlay
Как часть этого (в основном из -за свойства изоляции , которое я проигнорировал для этого), я пытался понять контексты по укладкам и то, как они играют в reveling, и я использовал представление 3d -слоя в отношении Chrome Devtools, чтобы проверить CONTES, чтобы проверить CONTES, чтобы проверить CONTES. Для элементов HTML каждый элемент, по -видимому, принадлежит своему собственному контексту укладки, тогда как SVG - это единственный контекст укладки, и все дети находятся в этом. Поэтому для меня я думаю, что результаты должны быть инвертированы, так как каждый ребенок HTML будет отображаться до своего собственного слоя и композиции индивидуально, но ясно, что это не то, что происходит. Спецификация смешивания [...] < /p>
< /blockquote>
и в спецификации CSS, в нем говорится: < /p>
Элемент, который применяется, должен смешиваться со всеми базовым содержимым в контексте стека [css21], который принадлежит элементу. /> , который я интерпретирую, чтобы означать, что каждый ребенок из смешанного родителя должен смешиваться с каждым другим ребенком, давая (в теории) результаты, показанные в примере SVG. Смешивание в стиле SVG с использованием только HTML-элементов и CSS? Я знаю, что оба можно легко спорить, и существуют соображения эффективности того факта, что метод SVG более медленнее, но для спецификации, какой из них действительно правильная реализация?
Подробнее здесь: https://stackoverflow.com/questions/797 ... g-elements
