svg 作为背景图像,带有遮罩以更改颜色,并带有阴影以显示阴影
svg as background image with mask to change the color and with drop-shadow to show the shadow
我是编码 html 和 css 的初学者,所以有一个关于 svg 的问题。当我使用 svg 作为背景图像并想要更改颜色时也给阴影,它不能同时使用这两个属性。希望有人能帮助我:
.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>
将掩码应用于伪元素,因为您需要一个额外的元素来应用过滤器。应该是没有蒙版的元素。
.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>
我是编码 html 和 css 的初学者,所以有一个关于 svg 的问题。当我使用 svg 作为背景图像并想要更改颜色时也给阴影,它不能同时使用这两个属性。希望有人能帮助我:
.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>
将掩码应用于伪元素,因为您需要一个额外的元素来应用过滤器。应该是没有蒙版的元素。
.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>