0

我有.card一个background-blend-mode: multiply适用于它的课程。它在桌面上的任何地方都可以正常工作，但在 iOS（Firefox、Safari）上它只能在某些元素上工作。

.card {
  padding: 3rem;
  margin-top: 2rem;
  background-image: url(./Images/textured_paper.png);
  background-color: rgba(107, 79, 79, 0.87);
  background-blend-mode: multiply;
  box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, 0.5);
}

在这个通过 jQuery 加载到主页面的页面上（页面上的所有内容都是这样加载的），只有最后两个 div 正确应用了这个效果。第一个不会融合。

<div class="card">
    <h3>About Me</h3>
    <div><a href="https://twitter.com/dooomscrolls"> <img src="Images/profilepic.jpeg"></a></div>
    <p><b>Francisco Torres</b></p>
    <br>
    <p>Portugal</p>
    <p>Game Dev</p>
    <p>CG</p>
</div>
<div class="card">
    <h3>Popular Post</h3>
    <div class="fakeimg">
        <p>Image</p>
    </div>
    <div class="fakeimg">
        <p>Image</p>
    </div>
    <div class="fakeimg">
        <p>Image</p>
    </div>
</div>
<div class="card">
    <h3>Title</h3>
    <p>something</p>
</div>

此外，这两个 div 是整个网站中唯一正确应用混合的。

我该怎么做才能让背景混合无处不在？

4

0 回答 0