0

我正在尝试使用文本作为页面的背景，并希望正文的主要内容显示在该文本上。此处显示的方法适用于静态文本，但我的文本是使用 jquery 动态打印的。

这是我到目前为止所拥有的：

html 

<h1>body content </h1>

css

@import url(http://fonts.googleapis.com/css?family=Lobster);

#msg{
    text-align:left;
    font-size:30px;
    font-family:lobster;
    color:#bb4e28;
    float:none;
    z-index: -1;
    overflow: hidden;
}

jQuery

var showText = function (target, message, index, interval) {
    if (index < message.length) {
        $(target).append(message[index++]);
        setTimeout(function () {
            showText(target, message, index, interval);
        }, interval);
    }
};

$(function () {

    showText("#msg", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra risus et nunc fermentum sed iaculis tortor rhoncus. Nulla facilisi. Nulla pharetra libero sed urna semper eu viverra orci volutpat. Mauris est dolor, porta ut sollicitudin sit amet, molestie vitae lectus. ", 0, 20);

});

http://jsfiddle.net/J7JTB/

您现在可以看到背景文本正在将其余内容向下推。我想要的是它在内容后面打印，并且如果页面达到一定长度不会导致页面滚动。有没有办法做到这一点？

4

2 回答 2

2 
#msg {
    position: fixed;
}

http://jsfiddle.net/isherwood/J7JTB/3/

于 2013-05-28T18:44:19.327 回答
1

将此添加到您的#msgCSS 中：

position: absolute;

演示：http: //jsfiddle.net/J7JTB/1/

于 2013-05-28T18:28:01.390 回答