Question

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

img src =“img / laptop.png”id =“laptop”class =“tour”alt =“laptop”/＆gt;

笔记本电脑是一个带透明中心的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才能工作/看起来正确。

Answer 2

不要为“容器clearfix”类指定宽度，然后向显示器添加适当的宽度，比如大约920px，这样它的大小更适合覆盖您正在使用的照片。

无法使背景图像适合另一个图像

2 个答案: