Adjusting the background color only changes the color of the hair, and leaving the white space transparent via background-blend-mode or mix-blend-mode

Question

Adjusting the background color only changes the color of the hair, and leaving the white space transparent via background-blend-mode or mix-blend-mode

55 views Asked by JackFan At 16 August 2023 at 09:28

May I ask how the effect in the design draft can be realized on the webpage? I don't quite understand the layer structure of the design draft file. In the design draft, the color of the hair can be changed by changing the background color, and the remaining blank parts remain transparent. I tried using the 'background-blend-mode' and 'mix-blend-mode' css properties but to no avail. Because the background color is always there. in addition, The hair color in the design draft uses three different mixed modes and colors, and I only set only one color in background proper. Is there any way to set multiple different hybrid modes and colors, whether it can be added by adding pseudo-elements. And I also tried using chatGPT, but it gave me invalid answers too. Please help me, thanks a lot.

.box {
  width: 413px;
  height: 363px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
  background: url("https://raw.githubusercontent.com/BonjourYY/image-server/master/hair.png") center center/auto auto no-repeat #9b5f45;
  background-blend-mode: multiply;
}

.box img {
  mix-blend-mode: multiply;
}

<div class="box">
  <img src="https://raw.githubusercontent.com/BonjourYY/image- 
server/master/hair.png" alt="" />
</div>

Original Q&A

There are 1 answers

**A Haworth** · Answer 1 · 2023-08-16T10:50:47+00:00

You could just use the same image as a mask to get rid of the background.

<!DOCTYPE html>
<html>

<head>
  <style>
    .mask1 {
      -webkit-mask-image: url(https://raw.githubusercontent.com/BonjourYY/image-server/master/hair.png);
      mask-image: url(https://raw.githubusercontent.com/BonjourYY/image-server/master/hair.png);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
    
    .box {
      width: 413px;
      height: 363px;
      border: 1px solid red;
      position: relative;
      overflow: hidden;
      background: url("https://raw.githubusercontent.com/BonjourYY/image-server/master/hair.png") center center/auto auto no-repeat #9b5f45;
      background-blend-mode: multiply;
    }
    
    .box img {
      mix-blend-mode: multiply;
    }
  </style>
</head>

<body>
  <div class="mask1">
    <div class="box">
      <img src="https://raw.githubusercontent.com/BonjourYY/image- 
server/master/hair.png" alt="" />
    </div>
  </div>
</body>

</html>

TechQA.

Adjusting the background color only changes the color of the hair, and leaving the white space transparent via background-blend-mode or mix-blend-mode

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in FIGMA

Related Questions in MIX-BLEND-MODE

Related Questions in BACKGROUND-BLEND-MODE

Popular Questions

Popular Tags

Trending Questions