我试图在内部有图像的 png 框架上放置阴影,但我不希望阴影覆盖图像。是否可以剪切或更改阴影的大小?
.grid {
display: grid;
}
.box8 { /*Girl*/
grid-area: 1 / 1 / 1 / 1;
margin: auto;
z-index: -1;
}
.frame1 { /*Rectangular gold frame*/
grid-area: 1 / 1 / 1 / 1;
filter: grayscale(20%);
margin: auto;
-webkit-filter: drop-shadow(15px 25px 20px #222); /*Makes the shadow fit the png-image*/
filter: drop-shadow(15px 25px 20px #222);
}
<div class="grid">
<div class="box8">
<img src="https://pbs.twimg.com/profile_images/774007491130785792/hAtxoNuW_400x400.jpg" width="240" height="300">
</div>
<img class="frame1" src="https://media.overstockart.com/optimized/cache/data/frames/FR-BW223111216X20-1000x1000.png" width="250" height="350" alt="Gullramme">
</div>
最佳答案
如何添加第二个框架实例,将其放在图片后面,并在该图片上添加阴影?这很骇人听闻,但它确实有效。像这样:
.grid {
display: grid;
}
.box8 { /*Girl*/
grid-area: 1 / 1 / 1 / 1;
margin: auto;
z-index: -1;
}
.frame1 { /*Rectangular gold frame*/
grid-area: 1 / 1 / 1 / 1;
filter: grayscale(20%);
margin: auto;
}
.frame2 { /*Rectangular gold frame*/
grid-area: 1 / 1 / 1 / 1;
filter: grayscale(20%);
margin: auto;
-webkit-filter: drop-shadow(15px 25px 20px #222); /*Makes the shadow fit the png-image*/
filter: drop-shadow(15px 25px 20px #222);
z-index:-2;
}
<div class="grid">
<div class="box8">
<img src="https://pbs.twimg.com/profile_images/774007491130785792/hAtxoNuW_400x400.jpg" width="240" height="300">
</div>
<img class="frame1" src="https://media.overstockart.com/optimized/cache/data/frames/FR-BW223111216X20-1000x1000.png" width="250" height="350" alt="Gullramme">
<img class="frame2" src="https://media.overstockart.com/optimized/cache/data/frames/FR-BW223111216X20-1000x1000.png" width="250" height="350" alt="Gullramme">
</div>
关于html - 更改阴影的大小而不是实际的 png,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53580249/