What is the best way to use CSS to set text color as a background image?

I need the output to look like the image displayed below.

Below is my code snippet:

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">
        Insert content here.
      </p>      
    </div>
  </div>
</div>

htmlcssbootstrap-4responsive-designbackground-image

Answer №1

Check out this solution that utilizes mix-blend-mode: screen;

Click here for the code

.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">
        Your content goes here.
      </p>      
    </div>
  </div>

Answer №2

What are your thoughts on this choice?

.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">
        Add your content here.
      </p>      
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Bootstrap v4 to create an Inline Select with Text

Currently seeking an inline dropdown styled with Bootstrap v4 that resembles the following: https://i.sstatic.net/ZTs8b.gif I have experimented with several options, and so far the closest one is as follows: <div class="dropdown"> <button cla ...

cssdropdownbootstrap-4

What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

I'm attempting to make all the li elements' width match that of my ul element. Here is the code I am using: http://jsfiddle.net/4XR5V/2/ I have looked at some similar questions on the website and tried adding: ul { width: 100%; display: tab ...

htmlcss

The Vue/Vuetify wrapper component does not automatically pass on the `hide-details` parameter to the input component

I recently crafted a custom wrapper for the v-select input using Vuetify. Along with custom properties, I utilized the v-bind="$props"attribute to inherit all props. Upon testing, I observed that while this method applies to most props, it doesn ...

javascripthtmlvue.jsvuetify.js

When floated to the right, the element is being pushed onto the next line in Firefox

Within a div, there are four elements. I specifically want the last element to be positioned on the far right, so I applied float: right to it. However, in Firefox, the last element gets pushed to the end of the next line instead. This issue does not occ ...

htmlcssfirefox

Manually closing Bootstrap 4 Popper.js Tooltip on command

To activate a Bootstrap 4 Popper.js Tooltip using jQuery, I simply do the following: When the 'like' button is clicked, the tooltip will be displayed: $('.like-btn').on('click',function(){$(this).tooltip('show');}); ...

javascriptjquerybootstrap-4tooltippopper.js

I am interested in creating a drop-down menu that opens when clicked, instead of hovering with the mouse, using only CSS and without relying on jquery, javascript,

After creating my own drop down menu, I am looking to make a condition where the list will show after clicking the mouse instead of showing on mouse hover. Is there a CSS property that can achieve this without using jQuery or JS? Here is the source code: ...

phphtmlcss

Tips for automatically hiding a button when the ion-content is being scrolled and displaying it again once scrolling has stopped

I have implemented a scroll function event in my HTML file using the following code: <ion-content (ionScroll)="scrollFunction($event)"> <ion-card *ngFor="let product of products" no-padding> <ion-item class="bigclass"> <i ...

htmlcssionic-frameworkionic3scrollview

Issues arising from script tags causing disturbances in CSS

As a newcomer to the world of web design, I recently embarked on a journey with Bootstrap and also started exploring the platform Codepen. However, after working on a project in Codepen and attempting to transfer my code to Sublime, some unexpected changes ...

csstwitter-bootstraphead

Using Jquery to find the class that matches the current element

Is it possible to select a specific div by its class when there are multiple divs sharing the same class and triggering the same function on button click? I only want to target the class where $(this) is located. I've experimented with .parent, .chil ...

javascriptjqueryhtml

Having RoundRect take the top left position of its rectangle container rather than its immediate parent (td)

I am currently troubleshooting an email-related issue that is specifically affecting Outlook In order to create a round Call To Action (CTA) button, I utilized Vector Markup Language (VML) The expected result should look like this: https://i.sstatic.net ...

htmlcssoutlookhtml-emailvml

What is the best way to smoothly hide and reveal a flex child element?

I am looking to create a flex container where the child element can smoothly animate to shrink and grow, while the remaining child elements expand to fill in the space. The method I have found involves setting the max-width to 0px and the borders' wi ...

htmlcss

Display a modal when clicking on a bootstrap glyph icon

I tried following a tutorial on how to create a Bootstrap modal at https://www.w3schools.com/bootstrap/bootstrap_modal.asp However, I would like to use a glyph icon in the code snippet like this: <span class="glyphicon glyphicon-pencil" class="btn btn ...

csstwitter-bootstrap

Using Javascript to iterate through and increase HTML code with values all the way up to 55

I am looking for a way to automatically generate a list of links in an HTML page using JavaScript. I have tried a few scripts, but none have worked for me. This is the current structure of my HTML... <a href="1.html"><img src="images/1.jpg" widt ...

javascripthtmlloopsstatic

Submitting data from an HTML form directly to a Google Docs spreadsheet

Can an HTML form post directly into a Google Docs spreadsheet without allowing public access or modifications by others? I'm wondering if it's possible to achieve something like this: <form action="https://google-docs-url" method="POST"> ...

htmlformsgoogle-docs

Utilizing CSS to Create Fixed Position Elements

How can I create a CSS Style with a fixed position property for a div? When I place this particular div inside another div containing text, the fixed-positioned div overlaps the text, causing it to be hidden. I want to align the text and image divs next ...

htmlcss

Tips for customizing the color of the select drop down arrow component:

Is there a way to change the color of the select drop down box arrow part? It needs to be compatible with IE9, Firefox, and other browsers. Currently, the drop down box looks like this: I would like the arrow part to have this appearance: I believe this ...

htmlcssselectdrop-down-menubackground-color

Changing the HTML page in Django based on form submission

I want my HTML page to display a message once the form is submitted by the user, instead of showing the form again. I tried using the registration date to determine if the form has been submitted or not, but encountered an error when the form was not submi ...

pythonhtmldjango

Working with JavaScript Events within an Iframe

Is it possible to link an onclick event to an IFrame? I attempted using the HTML attribute, but that approach was unsuccessful. Next, I enclosed it within a div, which also did not work. Finally, I tried setting up a jQuery event handler, only to encounte ...

javascriptjqueryhtmliframe

How come my menu items are crammed together on a small screen?

My menu items are displaying properly on a large screen using CSS grid, but they overlap on a small screen. What could be causing this issue and how can I resolve it? I have included the CSS code here, and you can access the full source code (HTML and CSS ...

csscss-grid

`CSS3 animations utilizing keyframes and transformation`

Looking to replicate a similar effect using CSS animations: I've created a file working with keyframes for the animation, but it's not functioning as desired. My goal is to have the circles complete a full rotation on their axis, starting from ...

csscss-animationskeyframe