Question

我在显示某些文字的背景时遇到了一些麻烦。背景应与（在中心）显示一些（真实）文本，如按钮但不可点击。我有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>

Answer 1

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

button fiddle

<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;
}

显示小背景的文本

1 个答案: