如何在混合混合模式下只制作黑白背景颜色？答案

【问题标题】：How to make only background color black and white in mix-blend-mode?如何在混合混合模式下只制作黑白背景颜色？
【发布时间】：2022-01-05 11:17:48
【问题描述】：

我正在使用 vue 开发一个应用程序。但是，我不想为一页上的背景图像设置黑白，也不想为其上方的元素设置黑白，而是自动设置，整体变为黑白。有什么办法解决吗？？

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

【问题讨论】：

标签： html css sass background-image mix-blend-mode

【解决方案1】：

千万不要用div做背景封面，图片不会全屏

【讨论】：

这不取决于边距设置吗？对我来说，在 div 上设置带封面的背景似乎很正常。

【解决方案2】：

只需将此代码用于背景封面图片，始终使用 html 和 body 作为 CSS 样式中的背景

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

【讨论】：

【解决方案3】：

w3schools 上mix-blend-mode 的定义说“mix-blend-mode 属性指定元素的内容应如何与其直接父背景混合”。因此，这意味着您必须需要一个父级，并且由于您不想在 .container 上设置 mix-blend-mode，您可以将 .blank 包装在另一个 div .main 中并将其设置为 background-color:black，使其高度与.blank 然后就可以了。

 .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>

【讨论】：