显示具有小背景的文本 - displaying text with a small background

displaying text with a small background

本文关键字：文本背景显示 | 更新日期: 2023-09-27

我在显示某些文本的背景时遇到一些问题。背景应该与一些（真实的）文本一起显示（居中），就像一个按钮，但不能点击。我有一张150x24像素的背景图片。然而，一旦用我的css显示，按钮的大小就高达940x150。

由于我是css的初学者，我想我在这里错过了一些东西。。。

我的代码看起来像

<div class="wrap"> <img src=sites/all/themes/at_subtheme/css/img/header.jpg>
    <div class="caption">
       <div class="caption-inner">
           <div class="caption-content">
              <?php if  ((( user_is_anonymous())) or (in_array('administrator', array_values($user->roles))) ) :?>
              <h2 class="loginlink"> <a href="http://www.example.com">Login</h2></a><?php endif; ?>  
              <h2 class="mybackgroundtext">Mybackgroundtext</h2>
              <img class="button"> <img src=sites/all/themes/at_subtheme/css/img/button.jpg>
              <h2 class="headerposition">My headertext</h2>
              <h6 class="subheaderposition">mysubheadertext</h6>
              <h6 class="subsubheaderposition">Mysubsubheadertext</h6>
           </div>
       </div>
    </div>
</div>

我不确定你到底想做什么。我只取了你的按钮代码，并制作了一个带有几个选项的JSFIDDLE。谢谢，

按钮小提琴

<div class="caption"> 
    <a target="_blank" title="Microsoft" class="btn btnImgContainer" href="http://www.microsoft.com/en- us/default.aspx"> 
        <img class="myImage" src="http://c.s-microsoft.com/en-us/CMSImages/mslogo.png?version=856673f8-e6be-0476-6669-d5bf2300391d" />
    </a>  
    <a target="_blank" class="btn btnContainer" href="#">Mybackgroundtext</a>  
    <a target="_blank" class="btn btnImgBackground" href="#">My Different Button</a>
</div>
.btn {
    margin: 10px;
    width: 200px;
    height: 100%;
    padding: 10px;
    float: left;
    text-align: center;
    text-decoration: none;
}
.btn:hover {
    padding-top: 15px;
    text-decoration: underline;
}
.myImage {
    width: 100%;
    /*The height 100% distorts image*/
    height: 100%;
}
.btnImgContainer {
    width: 150px;
}
.btnContainer {
    background: blue;
    color: white;
}
.btnImgBackground {
    background: url("http://www.psdgraphics.com/file/abstract-background.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    color: white;
}