无法将背景图像放入另一个图像中答案

【问题标题】：Unable to fit background image fit inside another image无法将背景图像放入另一个图像中
【发布时间】：2012-10-07 07:17:15
【问题描述】：

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

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

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

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

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

【问题讨论】：

出血是什么意思。好像没问题。你想成为什么。提供更多细节
我希望你不要以这种方式推广网站..

标签： javascript html css

【解决方案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 才能正常工作/看起来正确。

【讨论】：

谢谢！这行得通。我还更新了这个问题，希望能更清楚一点

【解决方案2】：

不要为“container clearfix”类指定宽度，然后在显示器上添加一个合适的宽度，比如大约 920px，这样它的尺寸就更适合覆盖您正在使用的照片。

【讨论】：