Where did you install Firefox from? Help Mozilla uncover 3rd party websites that offer problematic Firefox installation by taking part in our campaign. There will be swag, and you'll be featured in our blog if you manage to report at least 10 valid reports!

Avatar for Username

Pretraži podršku

Izbjegni prevare podrške. Nikad te nećemo tražiti da nas nazoveš, da nam pošalješ telefonski broj ili da podijeliš osobne podatke. Prijavi sumnjive radnje pomoću opcije „Prijavi zlouporabu”.

Learn More

background-blend-mode is no longer functioning as it should with color option

  • 1 odgovor
  • 0 ima ovaj problem
  • 1 prikaz
  • Posljednji odgovor od zeroknight

szalaimd
szalaimd
more options

Hi,

I created a website with a pretty simple css in the body of the page. I have a background image, but its colors are too dominant, so I also added a background color property to make the background more "pale". This approach worked perfectly in Chrome and I am 99% sure that I also tested this back then in Firefox and it worked as expected.

Now, only a white background is displayed in Firefox (Chrome works perfectly), which is interesting, because nor the image nor the set colour is white (well... the colour is white, but it is semi transparent). Did I miss something or is this an accidentally added bug in Firefox?

For your reference I attach a minimal working (in Chrome the paler background is displayed properly, in Firefox white page) example (note: change image url to whatever):

html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

css:
body{
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 0;
    flex-direction: column;
    background-image: url(./resources/splash.jpg);
    background-position: center;
    background-size: cover;
    background-color:  rgba(255,255,255,0.1);
    background-blend-mode:color;
}

I appreciate the help, Mark

Hi, I created a website with a pretty simple css in the body of the page. I have a background image, but its colors are too dominant, so I also added a background color property to make the background more "pale". This approach worked perfectly in Chrome and I am 99% sure that I also tested this back then in Firefox and it worked as expected. Now, only a white background is displayed in Firefox (Chrome works perfectly), which is interesting, because nor the image nor the set colour is white (well... the colour is white, but it is semi transparent). Did I miss something or is this an accidentally added bug in Firefox? For your reference I attach a minimal working (in Chrome the paler background is displayed properly, in Firefox white page) example (note: change image url to whatever): html: <pre><nowiki><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <script src="script.js"></script> </body> </html> css: body{ height: 100vh; width: 100vw; justify-content: center; align-items: center; display: flex; margin: 0; flex-direction: column; background-image: url(./resources/splash.jpg); background-position: center; background-size: cover; background-color: rgba(255,255,255,0.1); background-blend-mode:color; } </nowiki></pre><br> I appreciate the help, Mark

Izmjenjeno od cor-el

Svi odgovori (1)

zeroknight
zeroknight
more options

It works for me. Blending can be affect by graphics driver bugs, does it still happen in Troubleshoot Mode?

Korisno?

Postavi pitanje

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.