Question

如果您使用动画效果，则在mix-blend-mode属性之前，您将不会获得混合混合模式

一旦您删除了动画类或禁用了动画，则混合混合将起作用有什么问题，我花了t个小时来解决简单的事情...帮助请

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
}

.box img{ mix-blend-mode:multiply}


.animate{  
  border:1px solid red;
  width:30px; height:30px;
  animation: spin 2s infinite linear;
}


@keyframes spin {
  0% {  transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

<div class="animate">123</div>


<div class="box">
  <img src="https://placeimg.com/400/200/animals" alt=""> 
</div>

混合掺混仍应生效

Answer 1

在过去，添加用于解决很多问题的转换transformZ（0px）。

至少在我的Chrome浏览器中，情况仍然如此：

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
  transform: translateZ(0px);  /* added */
}

.box img{ mix-blend-mode:multiply}


.animate{  
  border:1px solid red;
  width:30px; height:30px;
  animation: spin 2s infinite linear;
}


@keyframes spin {
  0% {  transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

<div class="animate">123</div>


<div class="box">
  <img src="https://placeimg.com/400/200/animals" alt=""> 
</div>

Answer 2

还将Intent intent = new Intent(this, BeaconActivity.class); startActivity(intent);添加到父元素也可以解决此问题。

mix-blend-mode

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
  mix-blend-mode:multiply;
}

.box img{ mix-blend-mode:multiply;}


.animate{  
  border:1px solid red;
  border-radius: 1rem;
  width:2rem; 
  height:2rem;
  animation: spin 2s infinite linear;
  display:flex;
  align-items: space-around;
  align-content: stretch;
  justify-content: space-around;
}


@keyframes spin {
  0% {  transform: rotate(0deg); background-color: aqua; }
  50% { background-color: yellow; }
  100% { transform: rotate(1turn); background-color: aqua; }
}

Answer 3

在这个问题中，动画的堆叠顺序在box和img之间，因为动画使用关键帧。我认为关键帧更改了动画的堆叠顺序。因此，Img无法在盒子中混合。我们可以使用z-index来更改元素的堆叠顺序。解决方案是img必须在框中。我们有两个选项。使用z-index的结果会有所不同。

第一个选项，我们可以在animate类中更改animate的堆栈顺序。 `

timestamp      open-price   high-price   low-price   close-price volume
1585151291564  245.14       244.35       244.97      244.97

` 结果-动画将是带有img的框的前面。

第二个选项，我们可以在box类中更改box的堆栈顺序。 `

.animate{
  position:relative;
  z-index:2;
}

` 结果-带有img的框将成为动画的前面。

.box{
  position:relative;
  z-index:2;
}

.box {
  background-color:yellow; 
  overflow:hidden;
  border-radius:10px;
}

.box img{ mix-blend-mode:multiply}


.animate{  
  border:1px solid red;
  width:30px; height:30px;
  position:relative;
  z-index:2;
  animation: spin 2s infinite linear;
}


@keyframes spin {
  0% {  transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

混合混合模式与动画之间的冲突

3 个答案: