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

Question

我正在用 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;

Answer 1

只需將此代碼用於背景封面圖像，始終使用 html 和主體作為 css 風格的背景

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

Answer 2

也寫在你的 css 代碼中

背景重復：不重復；

您的圖像重復這就是為什么您的圖像未設置為屏幕尺寸的原因。

Answer 3

w3schools 上mix-blend-mode的定義說“mix-blend-mode 屬性指定元素的內容應如何與其直接父背景混合”。 因此，這意味着您必須需要一個父級，並且由於您不想在.container .blank在另一個 div .main中並將其background-color:black設置為與.blank ，然后是 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>