0
客户端通过设计文件发送了部分文本在图像上，并且文本的背景在图像上具有“相乘”叠加层。但是，文本保持稳定的白色。文本背景颜色叠加在另一图像上复制，但文本保持纯白色
当文本只有一行时，我能够实现这一点 - 为背景（使用mix-blend-mode: multiply）和文本创建单独的容器，将它们的宽度与jQuery动态匹配，并将它们的绝对位置进行匹配。然而，有这样的文本是动态的，可以从1到多行。
我在我的智慧结束...任何帮助/想法/建议将不胜感激。谢谢！
FYI任何人想知道为什么不使用RGBA或不透明，这里的区别： 
if($(".transparent_blue").length) {
var h3width1 = $(".transparent_blue+h3").innerWidth();
bgwidth1 = h3width1 + 50;
$(".transparent_blue").width(bgwidth1);
}.top-content {
position: relative;
}
.text-wrap {
background-color: white;
width: 40%;
float: left;
}
.image-wrap {
height: 400px;
width: 60%;
float: right;
min-height: 450px;
}
.transparent_blue {
position: absolute;
z-index: 1;
margin-left: -20px;
background-color: #0067a3;
mix-blend-mode: multiply;
}
.transparent_blue_placeholder {
width: 1px;
height: 40px;
}
h2 {
text-transform: uppercase;
font-family: arial;
font-size: 2.7rem;
margin-top: 30px;
margin-bottom: 30px;
}
h3 {
font-family: arial;
position: absolute;
z-index: 2;
font-size: 1.3rem;
line-height: 2;
color: white;
margin: 0;
margin-left: -25px;
padding: 0 25px;
}
.h3-placeholder {
height: 80px;
width: 1px;
}
.image-container {
width: 100%;
height: 100%;
background: url("http://eskipaper.com/images/free-street-wallpaper-1.jpg") center center no-repeat;
background-size: cover;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-container">
<div class="text-wrap">
<h2>the ipsum</h2>
<div class="transparent_blue">
<div class="transparent_blue_placeholder">
</div>
</div>
<h3>At vero eos et accusamus et iusto odio dignissimos</h3>
<div class="h3-placeholder"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h4>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</h4>
</div>
<div class="image-wrap">
<div class="image-container"></div>
</div>
</div>
请包括您的实际代码...如果您不知道从哪里开始搜索关于伪元素'：before - ：after'和在颜色上使用不透明度'rgba（）' – DaniP
@DaniP I尝试过pesudo-elements，并且rgba（）不会达到与Illustrator中的“繁殖”叠加相同的视觉效果。 – DimSum
那么包括'代码'和所有关于你的问题的尝试，我们不能假设你已经完成了所有的事情 – DaniP