Stack Overflow
Stack Overflow

Questions tagged [mix-blend-mode]

The mix-blend-mode is a CSS property that sets how an element's content should blend with the content of the element's parent and the element's background.

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

https://drafts.fxtf.org/compositing-1/#mix-blend-mode

193 questions
0
votes
1 answer

Text Color Based on Background Color

I want to make a div that has text that will change color based on the background color around it. The color in the div will change between 2 different colors and I want the text color to be the opposite of those colors. So the text is black when…
Ryan Deshaies
  • 13
  • 1
  • 8
0
votes
2 answers

mix-blend-mode does not always work

I'm trying to achieve gradual text fading effect at the bottom of the scrollable block. Also there must be an image behind this block so simply placing color (opacity) gradient over this block won't do and mix-blend-mode must be used. The block has…
OPcode
  • 37
  • 5
0
votes
1 answer

How to get a blend mode effect without use the CSS property mix-blend-mode: multiply

I want to do a thing that should look like this code output, but without using the property mix-blend-mode: multiply of css, in order to get support for some old versions of moderns browsers. This feature of CSS is still low supporting, look this…
Yulio Aleman Jimenez
  • 1,642
  • 3
  • 17
  • 33
0
votes
1 answer

Mix-blend-mode: weird (temp) black background during SVG animation on android

I'm spinning a few rectangles atop each other, and their colors interact with using the css's mix-blend-mode. In all browsers it's fine, but on chrome on Android there is a black background that is generated around the svg's rectangle shape while…
sashaikevich
  • 167
  • 13
0
votes
0 answers

Mix-blend-mode: difference not working

I'm trying to make the h1's font reacting so that it's font color is always the opposite of the background. I've checked everything and have no idea what's wrong. Any help? var oldName; var open; function changeImage(name) { var text =…
Selsku
  • 1
  • 6
0
votes
3 answers

Blend mode layer goes outside image border

So I use a mix-blend-mode: multiply; effect to create a multiply layer on top of my image when hover on. The problem is the layer goes outside of the image border as in the picture below. I tried to set width and height to the .imgcon and .imgcon >…
Phuong
  • 71
  • 2
  • 12
0
votes
3 answers

Is it possible to apply a css blend mode to an element in a different div?

Is it possible to apply a css blend mode to an element in a different div? E.g, I have a large background hero image in one div. Above that image (in a different div) I have a blue semi-transparent box with text in it. This transparent box is what I…
Sam Mcleod
  • 415
  • 1
  • 4
  • 9
0
votes
1 answer

Animated text fill with mix-blend-mode

I got the problem, that if I remove the "background-color" of ".box-with-text" the text-fill doesn't work. .box-with-text { text-transform: uppercase; font: bold 6rem Open Sans, Impact; background: black; color: white; mix-blend-mode:…
Rubocop
  • 13
  • 1
  • 1
  • 6
0
votes
1 answer

is there a way to calculate mix-blend-mode (css) for svg element with javascript?

We have a simple svg composed of 5 shapes . We want to "mix-blend-mode" this svg with a layer color. However this css property is not working on internet explorer. Is there a way to calculate what would be the result for each shape of our…
Sulot
  • 504
  • 2
  • 6
  • 20
0
votes
2 answers

Which css property is it?

The property, I think, makes for example dark text color on light background if it is set to be light and text cannot be read...or reverses text color if it is on image and/or vice versa. I've seen some questions on SO with it but really can't find…
user2917245
-1
votes
1 answer

Adjusting the background color only changes the color of the hair, and leaving the white space transparent via background-blend-mode or mix-blend-mode

Design Link Code Link May I ask how the effect in the design draft can be realized on the webpage? I don't quite understand the layer structure of the design draft file. In the design draft, the color of the hair can be changed by changing the…
JackFan
  • 41
  • 5
-2
votes
1 answer

Vary text between specific colors based on background

Consider this partial screenshot of a webpage: The text color varies based on the background color because I am using mix-blend-mode: difference on the text. I would like to achieve a similar effect in my app, except I would like to use the…
Tom Lehman
  • 85,973
  • 71
  • 200
  • 272
-2
votes
1 answer

Mix Blend Mode on text and images

i have come close to what i am trying to make happen. i want to apply the blend mode to only be happening when the text and images overlap. Right now it is doing exactly what i want. However, i want the images to remain with no effect and just have…
Tyler Owens
  • 21
  • 1
1 2 3
…
12
13