- From: Letocha Torgue Philippe via GitHub <sysbot+gh@w3.org>
- Date: Thu, 15 Dec 2022 22:24:50 +0000
- To: public-css-archive@w3.org
letochagone has just created a new issue for https://github.com/w3c/csswg-drafts:
== [compositing] mix blend mode does not work in the following configuration, I would like to understand why ==
in the following example I apply the mix-blend-mode
but it gives no effect
The color of the second div on the first is the same as
if we remove the mix-blend-mode property from the div between the two.
========= Cs ( source color)
========= mix-blend-mode
========= Cb( destination color
**WITH MIX BLEND MODE**
```
#Cb {
width: 100px;
height: 100px;
background-color: rgba(0,250,0,1);
}
#blending {
width:100px;
height:100px;
mix-blend-mode:screen;
margin-top:-54px;
margin-left:24px;
}
#Cs {
width: 100px;
height: 100px;
margin-top:-74px;
margin-left:54px;
background-color: rgba(0,0,155,0.7);
}
```
```
<div id="Cb"></div>
<div id="blending"></div>
<div id="Cs"></div>
```
**WITHOUT MIX BLEND MODE**
```
#Cb {
width: 100px;
height: 100px;
background-color: rgba(0,250,0,1);
}
#blending {
width:100px;
height:100px;
___mix-blend-mode:screen;
margin-top:-54px;
margin-left:24px;
}
#Cs {
width: 100px;
height: 100px;
margin-top:-74px;
margin-left:54px;
background-color: rgba(0,0,155,0.7);
}
```
```
<div id="Cb"></div>
<div id="blending"></div>
<div id="Cs"></div>
```
The result is the same.
It's certainly obvious that I misinterpret this property but I can't find where my mistake is
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8235 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 15 December 2022 22:24:51 UTC