Question

客户端通过一个设计文件发送，该文件部分地在图像上显示文本，并且文本的背景在图像上具有“多次”叠加。但是，文本保持稳定的白色。

当文本只在一行中时，我能够实现这一点 - 为背景创建单独的容器（使用mix-blend-mode: multiply）和文本，使用jQuery动态匹配它们的宽度，并将它们绝对定位。然而，这就是文本是动态的，可以是1到多行。

我在我的智慧结束......任何帮助/想法/建议将不胜感激。谢谢！

对于任何想知道为什么不使用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>

Answer 1

这是我能为CSS唯一解决方案做的最好的事情。浏览器支持使用时有点亮：

＆＃13;

div {
  display: inline-block;
  position: relative;
}
p {
  position: absolute;
  width: 75%;
  top: 50%;
  left: 75%;
  transform: translateY( -50% );
}
span {
  display: inline;
  padding: 0.25rem 0.5rem;
  color: white;
  font-family: Arial, sans-serif;
  font-weight: bold;
  line-height: 2rem;
  background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==' );
  -webkit-background-blend-mode: multiply;
  background-blend-mode: multiply;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

＆＃13;

<div>
  <img src="http://lorempixel.com/300/250/people/6">
  <p><span>Lorem ipsum dolor. Lorem ipsum dolor.</span></p>
</div>

＆＃13;

由于 @lharby 指出不使用background-blend-mode，您可以尝试创建一个小的1px x 1px PNG，它近似于您正在寻找的内容。

除此之外，看起来JS将是必需的。你看过lettering.js了吗？我自己没有使用它，虽然它可能比你正在寻找的更多。

Answer 2

文本实际上是事件的标题，因此它可以是任何长度。当它碰到容器/视口的边界时，它应该破坏到第二个，第三个...行。

也许尝试只包括两次文本 - 这样你就可以将一个放在另一个之后，如下所示：https://jsfiddle.net/xfn0dusw/ - 注意背景中的克隆（意思是，在z轴上）是红色的背景颜色和文本颜色设置为透明，前景中的颜色没有任何背景，只有白色文本。由于格式相同（字体属性和填充），它们当然会占用相同的空间并在相同点处中断。克隆文本周围的额外div是必要的，这样我们就可以绝对定位那个 - 相反，定位跨度会剥夺它的内联和＃34;属性。

＆＃13;

.container {
  position: relative;
  padding: 2em;
  line-height: 2;
  border: 1px solid #000;
  background: #eee;
}

p {
  margin: 0;
}

.clone {
  position: absolute;
  top: 2em;
  left: 2em;
  right: 2em;
}

span {
  position: relative;
  z-index: 1;
  padding: .25em 1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
}

.clone span {
  z-index: 0;
  color: transparent;
  background: red;
}

＆＃13;

<div class="container">
  <p><span>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</span></p>
  <div class="clone"><span>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</span></div>
</div>

＆＃13;

我遗漏了所有其他的东西（图像，混合模式） - 但想法应该是明确的：将背景颜色和混合模式应用于克隆，它不会影响文本，因为那是在另一个元素中。

如果将文本放在那里两次会引起关于SEO和/或可访问性的任何问题，那么可能不会直接在HTML中包含克隆文本，而是克隆并将其插入JS，和/或使用屏幕阅读器等辅助技术添加aria-hidden以隐藏用户。（将文本放入自定义数据属性，然后将其用作伪元素/生成内容的值可能是另一种使＆＃34;克隆＆＃34;使用的方法。）

纯粹主义者可能会对文件中的文字两次皱眉;但考虑到替代方案 - 就像图形部门所说的那样，＆＃34;好吧，让我们把整个事情当作一个图像来设置！＆＃34; ，或者应用复杂的JS逻辑来人为地将文本分成几部分 - 我喜欢这种方法的相对简单性：让我们让浏览器做，它最擅长的是 - 根据可用空间动态渲染文本并应用换行符。

文本背景颜色叠加在另一个图像上相乘，但文本保持纯白色

2 个答案: