html - 如何以文本为背景制作新行？

Question

引用这个问题: Is there a way to use use text as the background with CSS?

我能够让一行文本出现在另一行文本后面。我无法弄清楚的是如何制作多行背景文本。这是我想要使用的模式: http://nanocluster.umeche.maine.edu/scope/bgScope

所以直接插入不行，一切都在一条线上。 好的，我想，我会使用 <pre></pre>一组标签，但这使背景文本不可见。所以我试着取出 pre标签，并放入 <br>在每条新线上。但它仍然没有。接下来我试着把

font-family: Courier;
font-size: 18px;
color:#167c11;

进入样式表，但是，背景中的文本仍然不可见。

看看我试图在文本中添加换行符作为背景的页面。 http://nanocluster.umeche.maine.edu/scope/

谁能看出我做错了什么？如何在 CSS 中获取多行文本作为背景？

Answer 1

您使用绝对定位和 z-index 来添加背景效果。

body{
    background:black;
    color:green;

}
#background{
    position:absolute;
    top:0px;
    left:0px;
    z-index:-1;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:default;
}
#content{
    color:red;
    font-family: Courier;
}

规则:

-webkit-user-select: none; /* Chrome/Safari */        
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+ */
        /* Rules below not implemented in browsers yet */
        -o-user-select: none;
        user-select: none;
        cursor:default;

给它一个背景效果，这样文本就不能被选中，并且光标是默认的而不是文本。html 非常简单:

<div id="background">
<pre>

    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
_____________________________________________________________________________________________________
t1:288 ms  t2:480 ms    Display Mode: Normal: Peak Detect    Vectors: OFF       Grid = FULL


</pre>
        </div>
        <div id="content">
            I am content and I am above the grid!
        </div>

Check out this Demo