我怎样才能使这种背景带有阴影？

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>

请注意，这只是出于娱乐目的，它并不完美，我不会在生产站点上使用它。