【问题标题】: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】:

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

    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> 
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2012-11-12
          • 1970-01-01
          • 2021-09-10
          • 2021-09-03
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多