样式化<pre>标签
在我的网站文档中,我有一些代码应该显示,以便建议用户如何通过按照显示的代码更改网站的外观.我不想在这个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>正如上面的评论所提到的，您将不得不使用线性渐变。由于您实际上声明了顶部和底部填充（当与行高不同时，将干扰文本相对于渐变的相对偏移），因此您必须设置背景图像的 y 位置：
background-position: 0 14px;
...假设您的顶部填充为 14px（如您的示例中所述）。
解决方案1：使用linear-gradient
linear-gradient实际上在当今的现代浏览器中得到了广泛的支持（>93% 无前缀，>94% 有前缀）。对于linear-gradient，假设开始和结束颜色停止点与最近的断点相同，因此您需要声明的是：
- 两个断点，颜色 A 和颜色 B 均位于 50%（中）
- 将背景高度设置为行高的 2 倍
IE：
background-image: linear-gradient(180deg, #eee 50%, #fff 50%);
background-size: 100% 48px;
background-position: 0 14px;
background-image: linear-gradient(180deg, #eee 50%, #fff 50%);
background-size: 100% 48px;
解决方案 2：使用repeating-linear-gradient
使用repeating-linear-gradient与 非常相似linear-gradient，但请记住声明所有颜色停止点（不假定开始和结束停止点）：
- 0px处的颜色A（开始）
- 24px 处的颜色 A（1× 行高）
- 颜色 B，24 像素（1× 行高）
- 颜色 B，48 像素（2× 行高）
IE：
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 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>小智 6
正如@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>