How to put text color as a background image using CSS?

Question

I want output as an image shown below.

Here is my code:

.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>

this is help you - http://tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/ — s.kuznetsov, Aug 18 '20 at 12:59
Need help: https://stackoverflow.com/questions/63575174/bootstrap-image-card-text-overlay — Sid Sss, Aug 25 '20 at 10:21

score 2 · Accepted Answer · answered Aug 18 '20 at 13:08

Here is a solution using 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>

Need help: https://stackoverflow.com/questions/63575174/bootstrap-image-card-text-overlay — Sid Sss, Aug 25 '20 at 10:21

s.kuznetsov · Answer 2 · 2020-08-18T13:28:24.743

1

How do you like this decision?

.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>

edited Aug 18 '20 at 13:28

answered Aug 18 '20 at 13:13

s.kuznetsov

14,870
3
10
25

I would avoid using 'color-dodge', 'screen'' is more suited to making black elements transparent – dantheman Aug 18 '20 at 13:26
Yes you are right. Better to use `screen`. Edited answer. – s.kuznetsov Aug 18 '20 at 13:32
Need help: https://stackoverflow.com/questions/63575174/bootstrap-image-card-text-overlay – Sid Sss Aug 25 '20 at 10:21

How to put text color as a background image using CSS?

2 Answers2