I'm trying to add a box-shadow
to my image, but my image has some transparent parts and in this case there's a problem with box-shadow
, in order to understand my problem take a look at this code:
.framed-image {
background: url("https://cdn.pbrd.co/images/HfNQr1M.png") no-repeat;
background-size: cover;
padding: 18px;
object-fit: cover;
}
.image-menu {
width: 300px;
height: 200px;
background-size: 100% 100% !important;
-moz-box-shadow: 0 3px 8px rgb(136, 136, 136);
-webkit-box-shadow: 0 3px 8px rgb(136, 136, 136);
box-shadow: 0 3px 8px rgb(136, 136, 136);
}
<div class="image-menu-parent">
<img class="framed-image image-menu" src="http://placehold.it/1/365f83">
</div>
As you can see theres a white background at transparent parts of the image! how can i use box-shadow
in the right way? thanks for your time ♥