在我的网站文档中，我有一些应该显示的代码，例如建议用户如何按照显示的代码更改网站的外观和感觉。我不想在这个pre 标签中使用背景图片，但想要一些样式。就像每一行代码都应该有一个备用的背景颜色。我已经链接了灵感图片。
pre {
font-size: 20px;
border: 2px solid grey;
width: 450px;
border-left: 12px solid green;
border-radius: 5px;
padding: 14px;
}<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>【问题讨论】：
正如@Mr Lister 所说，使用渐变。
.my-pre{
line-height:1.2em;
background:linear-gradient(180deg,#ccc 0,#ccc 1.2em,#eee 0);
background-size:2.4em 2.4em;
background-origin:content-box;
/* some extra styles*/
padding:0 20px;
text-align:justify;
font-family:calibri,arial,sans-serif;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<pre class="my-pre">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptate ab pariatur assumenda ipsum exercitationem tempore
architecto, adipisci, id nihil culpa molestias rerum, dolore alias?
Fugit eos doloribus dolore, expedita officiis.
</pre>
</body>
</html>【讨论】：
正如上面提到的 cmets，您将不得不使用线性渐变。由于您实际上声明了一个顶部和底部填充（当与您的行高不同时，会干扰文本相对于渐变的相对偏移量），您必须设置背景图像的 y 位置：
background-position: 0 14px;
...假设您的顶部填充为 14px（如您的示例中所述）。
linear-gradient
linear-gradient is actually very widely supported 在当今的现代浏览器中（>93% 无前缀，>94% 有前缀）。对于linear-gradient，假设开始和结束颜色停止点与最近的断点相同，因此您只需声明：
即：
background-image: linear-gradient(180deg, #eee 50%, #fff 50%);
background-size: 100% 48px;
pre {
font-size: 20px;
border: 2px solid grey;
width: 450px;
border-left: 12px solid green;
border-radius: 5px;
padding: 14px;
/* Fixed line height */
line-height: 24px;
/* Use linear-gradient for background image */
background-image: linear-gradient(180deg, #eee 50%, #fff 50%);
/* Size background so that the height is 2x line-height */
background-size: 100% 48px;
/* Offset the background along the y-axis by top padding */
background-position: 0 14px;
}<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>repeating-linear-gradient
使用repeating-linear-gradient 与linear-gradient 非常相似，但请记住声明所有颜色停止（不假定开始和结束停止）：
即：
background-image: repeating-linear-gradient(
180deg,
#eee 0px,
#eee 24px,
#fff 24px,
#fff 48px);
这是一个例子：
pre {
font-size: 20px;
border: 2px solid grey;
width: 450px;
border-left: 12px solid green;
border-radius: 5px;
padding: 14px;
/* Fixed line height */
line-height: 24px;
/* Use repeating-linear-gradient for background image */
background-image: repeating-linear-gradient(
180deg,
#eee 0px,
#eee 24px,
#fff 24px,
#fff 48px);
/* Offset the background along the y-axis by top padding */
background-position: 0 14px;
}<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>【讨论】：
正如其他人所说，您可以使用linear gradiant
pre {
font-size: 20px;
border: 2px solid grey;
width: 450px;
border-left: 12px solid green;
border-radius: 5px;
padding: 14px;
background-color: #2f2f2f;
background-image: -webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image: -moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image: -ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image: -o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image: repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
padding: 0em 1em;
white-space: pre-wrap;
word-wrap: break-word;
}<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>简单的方法，
$("pre").html(function (index, html) {
return html.replace(/^(.*)$/mg, "<span class=\"line\">$1</span>")
});pre {
counter-reset: line-numbering;
background: #2c3e50;
padding: 12px 0px 14px 0;
width: 600px;
color: #ecf0f1;
line-height: 100%;
}
pre .line::before {
content: counter(line-numbering);
counter-increment: line-numbering;
padding-right: 1em;
/* space after numbers */
padding-left: 8px;
width: 1.5em;
text-align: right;
opacity: 0.5;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>有行号，
$("pre").html(function(index, html) {
return html.replace(/^(.*)$/mg, "<span class=\"line\">$1</span>")
});pre {
counter-reset: line-numbering;
background: #2c3e50;
font-size: 20px;
border: 2px solid grey;
width: 450px;
border-left: 12px solid green;
border-radius: 5px;
padding: 14px;
background-color: #2f2f2f;
background-image: -webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image: -moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image: -ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image: -o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image: repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
padding: 0em 1em;
white-space: pre-wrap;
word-wrap: break-word;
}
pre .line::before {
content: counter(line-numbering);
counter-increment: line-numbering;
padding-right: 1em;
/* space after numbers */
padding-left: 8px;
width: 1.5em;
text-align: right;
opacity: 0.5;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>【讨论】：
#2f2f2f 太黑了，看不到文字...试试 Run code sn-p。