如何使用 css 在文本后面设置图像？答案

【问题标题】：How do I set image behind the text using css?如何使用 css 在文本后面设置图像？
【发布时间】：2011-03-27 06:40:10
【问题描述】：

我正在尝试将文本从上到下和从左到右自动居中，换句话说，文本需要位于图像的中心。我唯一可以改变的是css，code标签是硬编码的，所以不能改变。

<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width:403px;
height:56px;
line-height:1.1em;
text-align:center;
padding-top:56px;
padding-left:60px;
padding-right:40px;
}
</style>

<code>message goes here</code>

【问题讨论】：

标签： css image text background

【解决方案1】：

您需要将显示设置为阻止 <code>，这是一个内联元素，以便应用宽度和高度，并且最好使用自动居中方式而不是硬编码任何填充大小：

http://jsfiddle.net/bx852/7/ 中的示例

<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width: 310px;
height: 66px;
line-height: 66px;
text-align: center;
display: block;
}

.notice { font-size: 50px }
</style>

<code>message goes here</code>
<code class='notice'>hi joe</code>

结果：

【讨论】：

当我有两行文字时，第二行文字上方有很大的空白，有没有办法减少文字上方的间距？
用多行居中是很棘手的。我倾向于使用表格来解决这个问题......有一些技巧和一些复杂的解决方案，但我发现带有单个单元格的表格是最简单的
Paul O'B 有一些垂直对齐示例：pmob.co.uk under "Vertical-align:examples:"

【解决方案2】：

如果您知道图像的尺寸，则将图像的宽度设为宽度，将文本居中对齐，将高度设为图像的一半并将顶部填充也设为一半。应该做的伎俩

code {
  background:url("images/bkg.png");
  width: 400px;
  height: 200px;
  text-aling: center;
  padding-top: 200px;
}

【讨论】：

【解决方案3】：

要水平和垂直居中文本，我会将text-align: center 设置为水平对齐。然后，我会以像素为单位设置line-height，直到它垂直对齐中心。通常，这是字体大小的两倍，但这取决于您设置的内边距和高度。

【讨论】：

【解决方案4】：

试试这个，

code {
background-image:url('images/header.png');
width: 310px;
height: 66px;
text-align: center;
}

希望你能得到答案..

我也可以试试这个，

<form action="put url here" method="get"><input type="submit" style="background-image: url(filename.gif); color: #0000cd; font-weight: bold; font-size: 13pt;"></form>

【讨论】：