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

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;

CodePudding user response：

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;
    }

CodePudding user response：

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

CodePudding user response：

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>