Question

我试图在我的图片中添加box-shadow，但我的图片有一些透明的部分，在这种情况下，box-shadow存在问题，以便了解我的问题看看这段代码：

＆＃13;

.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);
}

＆＃13;

<div class="image-menu-parent">
            <img class="framed-image image-menu" src="http://placehold.it/1/365f83">
        </div>

＆＃13;

正如你可以看到图像透明部分的白色背景！我怎样才能以正确的方式使用box-shadow？谢谢你的时间♥

Answer 1

您可以将filter与drop-shadow一起使用。

查看this list中支持的浏览器。

＆＃13;

.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;
  filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
}

＆＃13;

<div class="image-menu-parent">
  <img class="framed-image image-menu" src="http://placehold.it/1/365f83">
</div>

＆＃13;

另一个例子：

＆＃13;

.framed-image {
  background-size: cover;
  padding: 18px;
  object-fit: cover;
}

.image-menu {
  width: 300px;
  height: 200px;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
}

＆＃13;

<div class="image-menu-parent">
  <img class="framed-image image-menu" src="http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Bald-Eagle-PNG-Transparent-Image.png">
</div>

＆＃13;

Answer 2

简而言之，我不相信你可以使用盒子阴影，因为它将它放在图像周围并且不会遵循任何透明胶片。但是，您可以在图像中添加阴影以获得您正在寻找的效果。

Answer 3

＆＃13;

.framedImage {
    background: url("https://cdn.pbrd.co/images/HfNQr1M.png") no-repeat;
    background-size: cover;
    padding: 18px;
    object-fit: cover;
}

.image {
    width: 300px;
    height: 200px;
    background-size: 100% 100% !important;
    filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
}

＆＃13;

<div class="parent">
   <img class="framedImage image" src="http://placehold.it/1/365f83">
</div>

＆＃13;

框阴影问题与图像的透明部分

3 个答案: