Stack Overflow
Stack Overflow

Questions tagged [background-blend-mode]

The background-blend-mode CSS property describes how the element's background images should blend with each other and the element's background color.

The background-blend-mode CSS property describes how the element's background images should blend with each other and the element's background color.

43 questions
2
votes
2 answers

CSS Background-Blend-Mode over two Elements

Lets assume I have a div with a Gradient applied as a background-property. I now want to overlay a black PNG (of smaller size) and set the PNG to have a background-blend-mode of overlay. Unfortunately I have no idea on how to achieve this. I know I…
Adrian MK
  • 173
  • 1
  • 2
  • 12
1
vote
0 answers

Background-blend-mode set to screen does not work on mobile

So I'm new to coding and found out recently that you can apply linear-gradient to text. I did it using background linear gradient and the background-blend-mode like so: #header h1 { text-align: center; font-size: 5rem; font-weight: 900; …
Stoyan Peev
  • 11
  • 2
1
vote
1 answer

Blend two backgrounds with two imgs

how can I blend two backgrounds of parent and child element only with css:
and this doesn't work... I would like…
Matredok
  • 90
  • 1
  • 13
1
vote
1 answer

Imagemagick replicate css mask-image and background-blend-mode rules

I want to translate these CSS rules into Imagemagick's convert command(s): .foo { background: red url('image.png'); mask-image: url('mask.png'); background-blend-mode:multiply; } Any suggestions? JSFiddle with using my own sample image here:…
Helen Che
  • 1,951
  • 5
  • 29
  • 41
1
vote
2 answers

Creating photoshop layer blend effects in CSS

I need to provide this image with css. A layer must be placed on the image. I can't get exactly the same appearance. Is there a solution to this? It can also be an SVG filter. Intended result: I've tried it, but I can't make it. div { width:…
doğukan
  • 23,073
  • 13
  • 57
  • 69
1
vote
1 answer

Flickering on elements, Chrome only, with background-blend-mode only

We run the website www.desirio.com which uses a background-image on the body with background-blend-mode: luminosity In Chrome, when you hover over elements, you see strange white lines randomly blink "somewhere". When you remove bg-blend-mode (pay…
Raphael Jeger
  • 5,024
  • 13
  • 48
  • 79
1
vote
0 answers

Background-position & blend-mode bug in Firefox

I have a header with a background image, color and blend-mode: multiply. On scroll I change the background position vertically to create a parallax effect. In firefox it loads fine, but on scroll the background image is positioned wrong. It's…
Markus Finell
  • 328
  • 1
  • 3
  • 14
1
vote
0 answers

mix-blend-mode hard-light -- How can I use this without removing GRAY from all elements

I am trying to create an effect of content fading into a header element. Here is a fiddle: http://jsfiddle.net/jdesilvio/kthPT/105/ If you look at the result and scroll, you can see the effect I am trying to achieve. If you look closer at the HTML…
jdesilvio
  • 1,794
  • 4
  • 22
  • 38
1
vote
1 answer

Blend mode in Chrome not applying properly

Was working towards a repeated background that has a spotlight and decided to use blend modes to achieve this. However, it appears as if blend modes did not apply in Chrome. Replicated here: http://jsfiddle.net/pptn4f5v/7/ body { background:…
eruina
  • 853
  • 3
  • 9
  • 18
1
vote
1 answer

Apply Blend-Mode on transparent image

using CSS, i'm trying to blend a background-image with a color. The image is a PNG with translucent parts though. How can I apply a blend-mode only to the actually visible parts, so if the PNG has a hole, the elements lying behind can be seen…
DragonGamer
  • 834
  • 3
  • 9
  • 27
1
vote
0 answers

Test for background-blend-mode support that correctly targets iOS Safari and Chrome?

I am having a frustrating issue with using CSS background-blend-mode in a way that gracefully degrades everywhere; specifically, Safari and Chrome on iOS seem to evade my efforts to test them for support. As of this writing, background-blend-mode…
Jim O'Neill
  • 13
  • 4
1
vote
1 answer

Apply a css -webkit-filter grayscale before using a background-blend-mode keeping the color

I'm trying to achieve a monochrome colored image on mouse hover, where the colors of the image are transformed to grayscale and the gray shades afterwards replaced with the shade of color i'm blending with. It could look like this To simulate this…
hannes
  • 41
  • 7
0
votes
0 answers

Reveal animated background for specified text spans on mouse hover

Goal A hero section with text The hero text contains spans A circle follows the mouse position Where the circle overlaps the spans, an animated background is revealed All other text remains black, even if they are within the circle Ideally, I'd…
Razzzzz
  • 21
  • 5
0
votes
1 answer

How to darken/lower background image highlights with css?

I have a few images similar to this one: As you can see, there is a large difference between the shadows and highlights in the image. Most of the image is ok to put white text over, but sometimes my text goes over a bright spot, making it…
Finn E
  • 309
  • 2
  • 12
0
votes
2 answers

How to reduce the opacity of a background-blend-mode

Am looking for a way to reduce the opacity of background-blend-mode. The opacity in my code affects both the color and the image. I want it to affect only the blend mode. I want to achieve such an effect as in .example { background-image:…
Sagspot
  • 25
  • 1
  • 2
  • 10
1
2
3