0

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

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

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

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

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

4

2 回答 2

0

最简单的方法是将笔记本电脑图像的背景设置为白色，然后覆盖图像中“渗出”的部分。

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

我认为正确执行此操作的方法是拥有一个绝对定位的元素，该元素适合笔记本电脑屏幕的范围并显示图像。

类似的东西

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

于 2012-10-17T05:17:50.513 回答
0

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

于 2012-10-17T05:29:52.373 回答