How to make only background color black and white in mix-blend-mode?

Question

I am developing an app with vue. However, I do not want to set black and white for the background-image on one page and not to set black and white for the elements above it, but it is set automatically and the whole is changed to black and white. Any way to fix it??

//template
<div class="blank">  //root element -> I set the background image here
        <div class="container"> // I don't want to set mix-blend-mode here.
           ...
        </div>
</div>

style
.blank {
    display: flex;
    justify-content: center;
    height: 659px;
    background: url('../../assets/images/bg_gray.png') 100%;
    mix-blend-mode: luminosity;
    background-size: cover;
    & .container {
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 0;

score 1 · Answer 1 · answered Nov 28 '21 at 05:10

just use this code for background cover image,always use html and body for background in css in style

html {
        height: 100%;
        }
    body {
        background: url(''../../assets/images/bg_gray.png''); 100%;
        background-size: cover;
    }

POONAM KHATRI · Answer 2 · 2021-11-28T05:06:00.903

0

never use div for background cover, image will not set as full screen

edited Nov 28 '21 at 05:06

answered Nov 28 '21 at 04:42

POONAM KHATRI

59
7

Doesn’t this depend on margin settings? It seems pretty normal to set a background with cover on a div to me. – A Haworth Nov 28 '21 at 08:10

score 0 · Answer 3 · answered Nov 28 '21 at 05:17

The definition of mix-blend-mode on w3schools says "The mix-blend-mode property specifies how an element's content should blend with its direct parent background". So, that means you must need a parent and since you don't want to set mix-blend-mode on .container you can wrap .blank in another div .main and set its background-color:black give it same height as .blank and there you go.

 .main{
  height: 659px;
  background-color: black;
 }
.blank {
  display: flex;
  justify-content: center;
  height: 659px;
  background: url('../../assets/images/bg_gray.png') 100%;
  mix-blend-mode: luminosity;
  background-size: cover;
 }
.container {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 0;
 }

<div class="main">
   <div class="blank">  //root element -> I set the background image here
      <div class="container"> //I don't want to set mix-blend-mode here.
               ...
      </div>
   </div>
 </div>

after reading the first sentence, I just chained blend modes and it worked. so it only calculates the output by only calculating for the parent? if so, then chaining is the way to deal with nested blend modes or a blend mode targeting grand parents — Vagif VALIYEV, Jun 09 '23 at 21:45

How to make only background color black and white in mix-blend-mode?

3 Answers3