javascript - 无法将背景图像放入另一个图像中

Question

查看此站点时，我注意到显示页面的背景图像从显示器的两侧渗出。有没有办法来解决这个问题？

img src="img/laptop.png"id="laptop"class="tour"alt="laptop"/>

笔记本电脑是一个透明中心的 png。然后我在笔记本电脑上应用了一个类，它将在笔记本电脑后面应用背景图像。即

.tour { background: url("../img/tour.jpg") center top no-repeat;

当某些图像大于笔记本电脑的宽度时出现问题

Answer 1

最简单的方法是将笔记本电脑图像的背景设为白色，这样会掩盖图像“渗出”的部分。

另一个快速解决方案是调整所有背景图像的大小，使它们适合显示器。

我认为正确地做到这一点的方法是有一个绝对定位的元素，它适合笔记本电脑屏幕的边界并显示图像。

类似的东西

<div class='image-container' style='position: relative;'>
    <div id='background' style='position: absolute; left: 100px; right: 100px; top: 30px; bottom: 120px;></div>
    <img src='img/laptop.png' />
</div>

这需要对图像上的实际边距进行一些适当的测量/测试，并且需要更改 javascript 和 css 才能工作/看起来正确。