-1

Design Link Code Link

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>
JackFan
  • 41
  • 5
  • 1
    A proper [mre] of your issue / of what you tried, belongs _directly_ into your question; please do not just send us to external platforms (where the content might change or disappear in the future, leaving the question here without proper context.) – CBroe Aug 16 '23 at 09:30
  • @CBroe I have modified the problem, thank you for your reminder. – JackFan Aug 16 '23 at 09:47

1 Answers1

1

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>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Thank you for your solution, but there are three color mixes in the design draft, how can I add three background color mixes in the above code? – JackFan Aug 16 '23 at 11:22
  • Ah ,I'd assumed your snippet had the final result and only the extraneous background needed erasing. I've no idea what the 'three color mixes' means I'm afraid. Could you add this information to your question because it obviously changes things - though the masking to get rid of the extra background will of course still work. – A Haworth Aug 16 '23 at 11:33
  • 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. – JackFan Aug 16 '23 at 11:49
  • Please update the question with this information. – A Haworth Aug 16 '23 at 12:39
  • I've added the info to the question. Thanks – JackFan Aug 16 '23 at 14:30