引用这个问题: 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 中获取多行文本作为背景？
最佳答案
您使用绝对定位和 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>
关于html - 如何以文本为背景制作新行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24782268/