如何使用CSS将文本颜色设置为背景图像？

Question

我希望输出如下所示的图片。

这是我的代码：

https://jsfiddle.net/sidh_41/t7sbc2zf/

.card-text
{
      background: #1f2227ab;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="card bg-dark text-white">
    <img src="https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100&w=240" class="card-img" alt="...">
    <div class="card-img-overlay">
      <h5 class="card-title">B</h5>
      <p class="card-text">
        Content here.
      </p>      
    </div>
  </div>
</div>

- Sid Sss

---

这是帮助你的 - http://tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/ - s.kuznetsov

需要帮助：https://stackoverflow.com/questions/63575174/bootstrap-image-card-text-overlay - Sid Sss

Answer 1

以下是使用 mix-blend-mode: screen; 的解决方案：

https://jsfiddle.net/08rh23tw/

.card-text {
  background: white;
  color: #000;
  height: 100%;
  mix-blend-mode: screen;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  text-align: center;
  padding: 30px;
}

.card {
  width: 400px;
  height: 600px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card bg-dark text-white">
    <img src="https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100&w=240" 
    class="card-img" alt="...">
    <div class="card-img-overlay">
     
      <p class="card-text">
        Content here.
      </p>      
    </div>
  </div>

- dantheman

---

需要帮助：https://stackoverflow.com/questions/63575174/bootstrap-image-card-text-overlay - Sid Sss

Answer 2

你觉得这个决定怎么样？

.card-title {
  text-align: center;
  font-size: 50px;
  line-height: 50px;
  background-color: white;
  padding: 10% 0%;
  color: black;
  /*mix-blend-mode: color-dodge;*/
  mix-blend-mode: screen;
}

.card-text
{
      background: #1f2227ab;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="card bg-dark text-white">
    <img src="https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100&w=240" class="card-img" alt="...">
    <div class="card-img-overlay">
      <h5 class="card-title">B</h5>
      <p class="card-text">
        Content here.
      </p>      
    </div>
  </div>
</div>

- s.kuznetsov

---

我建议避免使用“color-dodge”，而是更适合使用“screen”来使黑色元素透明。 - dantheman

是的，你说得对。最好使用“screen”。已编辑答案。 - s.kuznetsov

需要帮助：https://stackoverflow.com/questions/63575174/bootstrap-image-card-text-overlay - Sid Sss