我怎么能用影子制作这样的背景？

Question

嗨，我有一个包含图像和叠加层的div：

<div class="container">
        <div class="overlay"></div>
        <img src="tablet.png" alt="tablet">
</div>

如何使用像https://i.stack.imgur.com/Ls6Il.png这样的阴影进行叠加

Answer 1

虽然肯定可以通过CSS或SVG完成，但很可能阴影只是已经绘制阴影的背景图像。

但是，这是一个如何在css中考虑它的例子：

.scene {
  position: relative;
  width: 200px;
  height: 200px;
  background: #60c18b;
  overflow: hidden;
}

.object {
  position: absolute;
  width: 40px;
  height: 45px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_121330.png&f=1);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top left;
}

.object:after, .object:before {
  content: '';
  display: block;
  width: 100%;
  height: 100px;
  background: linear-gradient(rgba(0,0,0,0.3), transparent);
  transform: skew(-45deg, 0deg);
  transform-origin: top left;
  position: absolute;
}

.object:before {
  transform: translateY(2px) skew(0deg, -45deg);
  transform-origin: top right;
  width: 100px;
  height: 100%;
  position: absolute;
  right: 0;
   background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
}

<div class="scene">
  <div class="object"></div>
</div>

请注意，这只是为了好玩，它并不完美，我不会在生产网站上使用它。