Question

我正在尝试使用文本作为页面的背景，并希望在该文本上显示正文的主要内容。显示的方法here适用于静态文本，但我的文本是使用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/

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

Answer 1

#msg {
    position: fixed;
}

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

Answer 2

将此添加到您的#msg CSS：

position: absolute;

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

停止用作推送内容的背景的书面文字

2 个答案: