CODEWITHSUNDEEP
csssvgcss-filterscss-mask
Yichen Dai
Yichen Dai

Reputation: 41

svg as background image with mask to change the color and with drop-shadow to show the shadow

i am a beginner to code html and css, so a question about svg. when i use the svg as background image and want to change the color also give the shadow, it didn't work with the two properities at the same time. hope someone can help me:

    .image-container {
        width: 100px;
        height: 100px;
        background-size: 100%;
        background-color: #E1A95F;
        -webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg");
        -webkit-mask-size: cover;
        filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75));
    }
   <div class="image-container"></div>

Upvotes: 3

Views: 5813

Answers (1)

Temani Afif
Temani Afif

Reputation: 274252

Apply the mask to a pseudo element because you need an extra element to apply the filter. It should be an element where you don't apply the mask.

.image-container {
  width: 100px;
  height: 100px;
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));
}
.image-container:before {
  content:"";
  display:block;
  height:100%;
  background-color: #E1A95F;
  -webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg");
  -webkit-mask-size: cover;
}
<div class="image-container"></div>

Upvotes: 5

Related Questions