0

请看一下troop981.com：

在不同尺寸的显示器上查看或放大时，带有 eagle.gif 和可编辑文本的 Mountains.jpg 看起来像是悬在页面边缘。

我想制作 Mountains.jpg，并且 jpg 顶部的文本根据用户视图重新调整宽度和高度的大小。

下面的代码是页面的 HTML。我会很感激任何帮助，因为我对 HTML 或 CSS 一无所知，并且构建该网站的人不再与我们在一起。

<style>
    .background_image
    {
    background:url(http://www.troop981.com/default/portals/0/Tatra_Mountains_Panorama_01.jpg);      /* image to display */
    width:1602px;                     /* width of image */
    height:332px;                    /* height of image */
    overflow:hidden;                 /* so div won't change size */
    }
    .eagle_image
    {
    height: 222px; /* use the actual height of the eagle gif */
    width: 250px; /* use the actual width of the eagle gif */
    background:url(http://www.troop981.com/default/portals/0/0049.gif) no-repeat; /* use your eagle filename */
    position: absolute; top: 50px;    /* adjust these to see the eagle move to where you want */
    left: 40px;                               /* ditto from above */
    }
    .text_properties
    {
    padding-left:2px;                /* position of text in inner div */
    padding-top:2px;                 /* position of text in inner div */
    padding-right:2px;               /* position of text in inner div */
    padding-bottom:2px;              /* position of text in inner div */
    color:darkgreen;                   /* text color */
    font-size:40px;                  /* font size */
    font-weight:bold;                /* font weight */
    font-family:script;               /* font family */
    margin-left:400px;                 /* left position of text */
    margin-top:50px;                 /* top position of text */
    }
</style>
<div class="background_image">
<div class="eagle_image"></div>
<div class="text_properties">Congratulations to Patrick Guilfoy &ndash; Troop 981&rsquo;s 104th Eagle Scout</div>
</div>
4

1 回答 1

0

为什么要缩小背景图像？我认为最好不要缩小它，而只是在您查看较小尺寸的页面时使文本可缩放。

尝试使用以下方法更改 .background_image：

.background_image
    {
    background:url(http://www.troop981.com/default/portals/0/Tatra_Mountains_Panorama_01.jpg);      /* image to display */
    width:100%;                     /* width of image */
    height:332px;                    /* height of image */
    overflow:hidden;                 /* so div won't change size */
    }

这样它只会减少背景图像的宽度（而不是高度），并且 tekst 将调整到屏幕的大小。

于 2013-02-21T14:42:25.450 回答