0

有一个带有背景的页面。之前以 img:src 的形式给出。但我无法在上面插入文字。因此，我将该代码更改为背景图像。到目前为止一切正常。

然后我要插入的文字很长，超过了背景的高度。我必须添加一个卷轴。我插入了 max-height 但在这里感到困惑。

这里的页面是：http ://www.heptasarim.com/test/cezayir2/menuler2.html

背景地址：/cezayir/images/menuorta.png

HTML：

 <div id="menuorta2">
        <p style="background-image:url(images/menuorta.png); background-repeat:no-repeat; width:812px; height:404px;" id="myazi">
        <span class="mbaslik">Kokteyl Prolonge Menü</span><br />
        <strong>menü:</strong><br />
        <strong>soğuk gezenler:</strong><br />
        biberli zeytin ve marine somon<br />
        tartolet içinde nar ekşili patlıcan salata<br />
        hindi füme badem turşu ve hardal<br />
        marine zeytin ve peynir şiş<br />
        <strong>sıcak gezenler:</strong><br />
        şişte ızgara limon ve kalamar<br />
        susamlı et<br />
        sigara böreği<br />
        <strong>sıcak büfe:</strong><br />
        dana külbastı<br />
        kuru erikli tavuk<br />
        patlıcan beğendi<br />
        pilav ve salata<br />
        <strong>tatlılar:</strong><br />
        bal kabaklı cheese cake<br />
        portakallı irmik helvası<br />
        </p>

</div>

CSS：

    #menuorta {
top:165px;
left:50px;
position:absolute;
z-index:0;
}
#menuorta2 {
top:127px;
left:20px;
position:absolute;
z-index:1;
}
#myazi {
color:#401c17;
font-weight:100;
font-family:Bookman Old Style;
font-size:13px;
padding:40px 65px;
max-height:200px;
overflow:hidden;
}
.mbaslik {
font-weight:bold;
font-size:16px;
}

固定的 ： 

background: url(../image/menuorta.png) no-repeat;

..和/

非常非常非常感谢大家。特别是@ferne97

4

2 回答 2

0

将其设置为您想要的宽度和高度并添加一个overflow-y: scoll;。

#myazi {
    width: 600px;
    height: 200px;
    overflow-y: scroll;
}

如果你想让背景大于滚动区域，可以像这样在里面放置另一个 div。

<div id="myazi">
    <div class="inner-scroll">
        <!-- content here -->
    </div>
</div>

然后在css中添加这个..

#myazi {
    background: url(path/image.png) no-repeat;
    width: 800px; /* width of actual image */
    height: 600px; /* height of actual image */
}

.inner-scroll {
    width: 600px; /* width of content area */
    height: 200px; /* height of content area */
    overflow-y: scroll;
}
于 2013-02-13T02:11:42.327 回答
0

请删除以下 -

max-height :200px ;

这是将背景图像设置为 200px 高度。

为了改进您的 para 的表示方式，您可以利用 css3 coloumn 属性以更好的方式对其进行格式化。滚动对我来说是一种不健康的方式来表示主页内容。

在这里您可以看到并学习实施 - http://www.quirksmode.org/css/multicolumn.html

于 2013-02-13T02:12:47.760 回答