html - 如何使网站图像和幻灯片看起来像是设备屏幕？

Question

有许多网站主题具有幻灯片或图像框架，其样式看起来像是移动屏幕、平板电脑屏幕或计算机显示器等设备。请看下面:

在过去的 4 个小时里，我一直在寻找一些代码或一个开源插件，以使我能够以这种方式显示图像。我在 4 小时内只找到了 yootheme 和 hostmoog，它们都对插件收费。

请问其他人如何在图像周围获得这些设备样式框架？我需要图形软件吗？

这个问题也应该对其他人有帮助。我花了很长时间在每一种可能的组合下进行搜索。

提前致谢。

Answer 1

首先，创建您的设备“背景”。然后，将图像分成四 block :

The part of the background that appears above the top of the screen image
The part that appears below the bottom of the screen image
The part that appears to the left of the image between the top and bottom
The part that appears to the right of the image between the top and bottom.

然后，创建三个<div>秒。将顶部和底部部件放在 <div> 中s 1 和 3，并将第二个分成三个更小的 <div>秒。在左子和右子中渲染左子和右子<div> ，最后，在中间部分呈现您的幻灯片。