title: White Text color and White image background color issue
body: <p>I have an image and text as like below.</p>
  
  <p><a href="https://i.stack.imgur.com/YT6TG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YT6TG.png" alt="enter image description here"></a></p>
  
  <p><em>.html</em></p>
  
  <pre><code>&lt;div [ngClass]="cssDivClass" (click)="goToNextPage(data)"&gt;
    &lt;img [src]="data?.image" class="image" tappable&gt;
    &lt;div class="caption" [ngClass]="ionTextUppercase"&gt;{{data?.name }}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>.scss</em></p>
  
  <pre><code>.caption {
      position: absolute;
      left: 10px;
      bottom: 10px;
      color: white;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0;
  }
  </code></pre>
  
  <p>My question here is How can I handle this text color (i.e. white) with the White background image? What kind of CSS trick should I use here? I need white color text here since most of the other images have dark colors. So how can I handle this thing in a generic way?</p>