Question

我有一个css精灵，我需要将其作为背景图像放在某些文本的右侧。像外部链接图标。此外，我希望文本是全宽，然后是图像。

我的Css如下：

.container
{
    width:1247px; 
    background-color:#444;
}

.container a
{
    background: transparent url(http://i.imgur.com/s5rf9GY.png) no-repeat;
    height: 30px;
    width: 30px;
    display: block;
}
.container .external 
{
   background-position: -491px 2px;
}
.container .mail
{
   background-position: -526px 0px; 
}

小提琴链接如下：

http://jsfiddle.net/6dw31962/

请帮助。在此先感谢

Answer 1

试试这个。

.container {
  width:1247px;
  /*height:30px;*/    
}

.container a {
  display: block;
  position: relative;
  margin-bottom: 15px;
}
.container a:after {
  background: transparent url(http://i.imgur.com/s5rf9GY.png) no-repeat;
  height: 30px;
  width: 30px;
  display: inline-flex;
  content: '';
  position: absolute;
  top: -5px;
  background-position: -455px 0;
}

.container .external {
  background-position: -491px 2px;
}
.container .mail {
  background-position: -526px 0px; 
}

<div class="container">
  <a class="external" href="http://somelink.com/">MyLink</a>
  <a class="mail" href="gmail.com">Mail To Us</a>
</div>

将CSS Sprite Background Image放在文本右侧

1 个答案: