The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS blend mode on part of image, I need help with CSS blend mode on my testsite.
simm24
post May 10 2017, 04:04 AM
Post #1





Group: Members
Posts: 7
Joined: 5-September 14
From: Sweden
Member No.: 21,506



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.
Attached File  index.html ( 909bytes ) Number of downloads: 43


Thanks in advance

//PSL

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 10 2017, 08:48 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,598
Joined: 10-August 06
Member No.: 7



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);
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 10 2017, 11:05 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th July 2017 - 01:57 PM