在带有文本的按钮内有一个精灵图像

Posted 2023-03-05

【中文标题】在带有文本的按钮内有一个精灵图像

【英文标题】：Having a sprite image inside a button with text

【发布时间】：2014-04-19 02:01:09

【问题描述】：

我正在尝试创建一个按钮，目前是demo。

现在我不知道如何定位精灵图像，以便只有黑色图标可见。

有谁知道我该如何解决这个问题？

这是我想用按钮实现的：

没有悬停：

悬停：

这是我的代码：

html：

<a class="top-language" href="#" >Language</a>

CSS：

.top-language 
  border: 1px solid #ddd;
  padding: 5px;
  text-decoration: none;
  color: #000;
  position: relative;
  font-weight: bold;
  font-size: 13px;
  padding-right: 10px;
  padding-left: 35px;
  background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;



 .top-language:hover 
  background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;   

【参考方案1】：

这会奏效。这是jsfiddle

.top-language 
    border: 1px solid #ddd;
    width: 100px;
    color: #202020;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
    font-weight: bold;
    font-size: 13px;  
    width: 80px;
    margin: 0;
    line-height: 22px;
    text-align: right;
    text-decoration: none;        
    background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
    


.top-language:hover 
    background-position: bottom left;
    color: #d13030;  
    

【讨论】：

我改了一点，看看DEMO。我现在唯一需要知道的是如何在灰色边框上添加一些空间，这样它就不会粘在文本和图标上

添加padding-right: 10px;将修复右侧的边框。图标本身需要在其周围填充以防止边框接触它。

感谢您的帮助，非常感谢！

不客气。我已经在我的主要帖子中更新了 jsfiddle 以反映上述代码。

【参考方案2】：

您可以：

一个。降低按钮的高度；

b.增加图像本身中两个精灵之间的垂直间隙；

c。背景：url(...) no-repeat 0 2px;调整数值以推出红色图标

【参考方案3】：

.top-language 
  display: block;
  width: 22px;
  height: 22px;
  font-size: 13px;
  background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
  text-indent: -99999px;



.top-language:hover 
  background-position: 0 0;  

【讨论】：

在演示中只有图标是可见的，如何添加文字和边框使其看起来更像我发布的图像？

【参考方案4】：

您可以提供如下图片显示位置：

display:inline-block