How can I solve .png background-color problem?

I added two png image but ı couldn't change their background-color, although the first image which is mountain image, has not the same problem. What should I do? How I can solve that? Thankss...

/* div{background-color:#caf7e3;}
body{
  margin:0px;
}
h1{
  margin:0px;
}
p{
  margin: 0px;
}

classes */
body{
  background-color: #caf7e3;
}

.clouds{
  width: 60px;
  height: 100px;
  background-color:  #caf7e3;

}

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Y.E.S.</title>
    <link rel="stylesheet" href="css\styles.css">
    <link rel="icon" href="favicon.ico">
  </head>
  <body>
    <img src="https://themuellenator.github.io/images/mountain.png" alt="mountain">
    <img class="clouds" src="https://i.dlpng.com/static/png/4742574-cartoon-cloud-animation-png-clipart-animated-cartoon-animation-cartoon-cloud-png-728_469_preview.png" alt="cloud">
    <img class="clouds" src="https://i.dlpng.com/static/png/4742574-cartoon-cloud-animation-png-clipart-animated-cartoon-animation-cartoon-cloud-png-728_469_preview.png" alt="cloud">
    <div class="top-container">
      <h1>Hı, I am Yusuf</h1>
      <p>a programmer</p>
    </div>
  </body>
</html>

Solution

That is because the cloud pngs don't have a transparent background. To make the background color work, you have to get rid of the background. You can use a website like remove.bg