Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ CSS blend mode on part of image

Posted by: simm24 May 10 2017, 04:04 AM

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.
http://psimedia.se/Test/index.html

I have attached my HTML file, where the CSS is included.
index.html ( 909bytes ) Number of downloads: 1006

Thanks in advance

//PSL

Posted by: Christian J May 10 2017, 08:48 AM

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);
}

Posted by: pandy May 10 2017, 11:05 AM

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?