Help - Search - Members - Calendar
Full Version: CSS blend mode on part of image
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
simm24
Hi! I am trying to set a blend mode on a h1 tag on top of an image. But have run out of ideas, tried to search the internet, with mixed results. I hope that someone on here can help me with this.

This is a concept image of what I want the result to be.
IPB Image

and this is a link to the page as it is now.
My test site

I have attached my HTML file, where the CSS is included.
Click to view attachment

Thanks in advance

//PSL

Christian J
Not familiar with CSS mix-blend-mode, but try RGBA colors instead (they might be better supported too, but I didn't check):

CODE
h1 {
color: #fff;
background-color: rgba(255,0,255,0.5);
}
pandy
QUOTE(Christian J @ May 10 2017, 03:48 PM) *

Not familiar with CSS mix-blend-mode, but try RGBA colors instead (they might be better supported too, but I didn't check):


Me neither. Does the purple background in the mockup have a gradient though? Or is it the base image that tricks my eye?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.