我怎樣才能用陰影制作這樣的背景？

Question

我有一個包含圖像和疊加層的 div：

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

如何制作帶有陰影的疊加層 ?

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>

請注意，這只是為了好玩，它並不完美，我不會在生產站點上使用它。