0

このサイトを見ると、ページを表示している背景画像がモニターの側面からにじんでいることに気づきました。これを修正する方法はありますか？

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

ラップトップは、透明な中心を持つpngです。次に、ラップトップの背後に背景画像を適用するクラスをラップトップに適用しました。すなわち

.tour {background：url（ "../ img / tour.jpg"）center top no-repeat; }

一部の画像がラップトップの幅よりも大きい場合に問題が発生します

4

2 に答える 2

0

最も簡単な方法は、ラップトップの画像の背景を白にすることです。これにより、画像の「ブリードアウト」部分が覆われます。

もう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を変更する必要があります。

于 2012-10-17T05:17:50.513 に答える
0

「containerclearfix」クラスの幅を指定しないでください。次に、適切な幅（たとえば、約920px）をモニターに追加して、使用している写真をカバーするのに適したサイズにします。

于 2012-10-17T05:29:52.373 に答える