Background image clip-path color

HTML-CSS
#1

Hey, I was wondering if there is a way to change the clip-path shape’s color. Or change the opacity. Here is my code so far.

// Header Section
.header {
  padding: 1.6em; // 16px/10px = 2em
  &__container {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(https://i.imgur.com/Txm2nfS.jpg);
    height: 100vh;
    clip-path: polygon(0 0, 95% 0, 100% 10%, 100% 100%, 5% 100%, 0 90%);
  }
}
#2

Hi,

Have you tried opacity or background-color properties?

#3

If this is what you were looking for, don’t forget to thank me :sunglasses:

<!DOCTYPE html>
<html>
<head>
/* Importing Jquery */
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<style>

/* Change this to change the */
    .img-bg {
        width: 100px;
        height: 100px;
        background-color: #17c7e6;
    }

    .img-animation {
        clip-path: circle(100%);
        transition: clip-path 1.5s ease-in-out; /* Change the numerical value to the timing */
    }


    .img-animation.active {
        clip-path: circle(0%);
    }
    </style>
</head>

<body>

    <h2>The clip-path property</h2>

<!-- Creating a container for the image -->
    <div class="img-bg">
        <img class="img-animation"src="https://img.freepik.com/free-vector/abstract- dynamic-pattern-wallpaper-vector_53876-59131.jpg?size=338&ext=jpg" width="100px" height="100px">

</div>

<button id="glory">Change Path</button>

<!--If you don't know much about this, don't change this;-->
<script>
  $(document).ready(function(){
  let btn_class = "glory"; // Change the value according to the name of you event triggering element
  
  let img_class = "img-animation"; // Change this value with the id of your image
  	$("." + btn_id).click(function(){
      $(".").toggleClass("active");
    })
  })
</script>
</body>
</html>

LOL, Just realised it has been a year.

#4