Unexpected results with mix-blend-mode difference

I am struggling with making a black text element overlap a black div while ensuring that the overlapping part of the text appears white. I attempted to use the mix-blend-mode property, but it does not seem to be working as expected. Why is this happening?

Here is a quick demonstration: 

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: black;
    font-size: 9rem;
    mix-blend-mode: difference;
    z-index: 1;
}

.centered-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(calc(-50% - 10vh)) translateX(-50%);
    width: 22.5rem;
    height: 30rem;
    background-color: black;
}
<h1>This<br/>is a<br/>test</h1>
<div class="centered-block"/>

htmlcss

Answer №1

Combining black text with a mixed blend mode is not possible.

When dealing with a white background represented as rgb(255,255,255) and black text represented as rgb(0,0,0), the subtraction of each color results in rgb(255,255,255), making the text appear white on white. Conversely, white text subtracted from a white background results in black on white. If the background is black and the text is white, the result is white text. However, having both the text and background as black gives an output of black over black (as seen in your example).

The solution is straightforward: set your color: white; in h1. Additionally, ensure to assign a background color to your body to provide contrast for the text. To achieve this:

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: white;
    font-size: 9rem;
    mix-blend-mode: difference;
    z-index: 1;
  }

  .centered-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(calc(-50% - 10vh)) translateX(-50%);
    width: 22.5rem;
    height: 30rem;
    background-color: black;
  }
  
  body {
  background-color: white;
  }
<h1>This<br/>is a<br/>test</h1>
<div class="centered-block"/>

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

Emphasizing buttons that are in a "pressed" or "inactive" state

I've implemented three push buttons in my code using input with type="button", which act as toggle buttons (on/off). In the past, I used images to indicate when a button was pressed or reset, but now I want to achieve this effect using CSS. However, ...

cssformsbutton

Ways to calculate the product of two numbers using AngularJS within an HTML document

I am currently experimenting with AngularJS to create a unit conversion tool. I have set up two dropdown menus with unit values and would like to calculate the product of the selected values from the dropdowns. I have created a jsfiddle with my code, and I ...

javascripthtmlangularjs

What is the best way to activate the cube portfolio using custom jquery?

Is there a way to activate the Cube portfolio filter using custom JQuery? see image here For instance: In my Cube portfolio slider, I have over 20 projects featuring different technologies. When I slide the div, I want the filter to be activated based on ...

jqueryhtmlcss

Increasing the font size on a document

Once again, faced with my own silly problems. This time I stumbled upon the following page: http://jsfiddle.net/g3VBT/ I am trying to style the "enter your U.R.L here" text with the following properties: font-weight: 600; font-size: 1.5em; The issue ...

htmlcssbuttontext

challenges arising from using the css overflow: hidden attribute

Struggling with a popup displaying issue caused by an overflow: hidden property on the containing div. The background graphics of the popup are crossing over due to this setting, leading to a display problem where the width is cut off at the overflow bound ...

jqueryhtmlcssdhtml

Embeddable javascript code can be enhanced by incorporating references into the header

I have developed a basic calculator application using HTML, JavaScript, JQuery, and CSS. My intention is to allow others to embed this calculator app on their own web pages by utilizing a file named generate.js. Within this file, there are several documen ...

javascriptjqueryhtmlcss

After refreshing in FireFox, the "disabled" attribute of the button fails to function

On my webpage, there are 2 buttons - one enabled by default and the other disabled. When I click on an enabled button, their states switch - the enabled button becomes disabled and vice versa. This functionality works perfectly in Chrome, Edge, and IE11, b ...

javascripthtmljquerycssfirefox

The video link was not found during the page scraping process

I'm trying to download a video from the page below: After inspecting with Firebug, I found the video url, <video src="https://09-lvl3-pdl.vimeocdn.com/01/1449/2/57246728/138634997.mp4?expires=1457996449&amp;token=089e435c20e7781d36fce" preloa ...

pythonhtmlseleniumvideoweb-scraping

How can we incorporate "req.getParameter" within a "for loop" to store data in the database based on the user-defined quantity provided in another servlet?

Currently, I am working on a system where teachers have the ability to edit exams they have created. However, an issue arises when trying to save the questions and answers, as it depends on the number of questions in the exam. While requesting variables f ...

javavariablesservletsrequesthtml

What is the best way to set specific filenames in order to transmit them to the server?

Is there a way to send images files to a server using NODEJS without utilizing the traditional input file tag? I want to hard code the filepaths in an HTML client to achieve this. Are there any solutions available for this? Thanks in advance. ...

htmlfilenode.jsfile-upload

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

I'm attempting to display menu icons only on smaller screens like phones or tablets, and text on larger screens such as laptops or desktops. I've experimented with adjusting the media query and CSS, but haven't had any success. What specific ...

css

Utilizing Ajax Blob URL for Audio Streaming

My goal is to retrieve audio data using an Ajax request and load it into an audio element. However, I'm running into an issue where the player does not seem to work properly. The play button remains disabled as if nothing has been loaded. Below is a s ...

htmljqueryajax

Tips for notifying a user about leaving a page without saving their information

I created a small table where users can input product names and numbers. My question is, how can I notify the user if they try to leave the page without saving the entered information? <form action="index.php" method="post"> <input type="text" ...

javascriptjquerycsshtml

jQuery Slider not appearing on the page

I am attempting to incorporate the Basic jQuery Slider into my website. Below is the code I have used: For HTML file: <div id="slides"> <ul class="bjqs"> <li><a href="somelink"><img src="someim ...

javascriptjqueryhtmlcss

What is the best way to create a code block with a specific width in mind?

I'm currently working on a documentation website and I'm facing an issue with my code blocks. I can't seem to set a specific width for them; instead, the width is determined by the text content they contain. What I really want is for the co ...

htmlcsswidthinlinestyling

Ways to ensure the height of an element is consistent across various device modes

Testing out the angular-youtube-embed plugin with Chrome Dev tools' device mode, I wanted to see how the YouTube element would appear. Here's my code: <div class="fixed-header my-video"> <div style="padding:0px;"> <yo ...

javascriptcssangularjsyoutube-iframe-api

HTML5 validation fails to activate

Addressing the issue head-on Check out the form I have created: <form action="<?php echo base_url()?>" method="post" id="formfield"> <center> <label>How much? <small>( Minimum of 100 )</small></label&g ...

javascriptphphtml

Adjust the dimensions of a button in Jquery Mobile using a designated class

I am in the process of creating a Mobile App using Jquery Mobile, I'm aiming for a result like this: Unfortunately, what I end up with is this: I prefer not to utilize .ui-btn in my CSS, as I have already specified custom-btn. Here's the code s ...

jquerycsshtmljquery-mobile

I'm attempting to insert a line break after HTML elements that are being added from JavaScript code inside a `display: flex` div

I'm facing an issue where line breaks are not added after HTML elements are inserted via JavaScript upon clicking a button. For instance, the data from the inputs doesn't get separated even when I click submit multiple times: To illustrate, her ...

javascripthtmlcss

What could be the reason for Internet Explorer pulling styles from the media=print CSS?

The HTML below incorporates a DHTML behavior into a CSS class. Unfortunately, Internet Explorer (specifically version 8 in compatibility mode) does not read the top style exclusively; instead, it also recognizes the @media print. <!--[if IE]> < ...

cssdhtmlhtml-components