Question

我正在尝试在span元素中添加一些背景图像，并使用一些垂直偏移（background-position-y: 2px;）

但是，即使link元素的高度为50px，span元素中的img也会被垂直截断。

a {
  display: inline-block;
  height: 50px;
  padding-left: 5px;
}
a span {
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-position-y: 2px;
  display: inline-block;
  width: 4px;
  height: 13px;
}
a .open {
  background-image: url('http://img11.hostingpics.net/thumbs/mini_161877bracketleft.gif');
}
a .close {
  background-image: url('http://img11.hostingpics.net/thumbs/mini_762032bracketright.gif');
}

<p>
  some text <a href="#"><span class="open"></span>some link<span class="close"></span></a>
</p>

感谢您的帮助。

Answer 1

删除background-position-y: 2px;并将vertical-align:middle;添加到a span。

a {
  display: inline-block;
  height: 50px;
  padding-left: 5px;
}
a span {
  background-repeat: no-repeat;
  background-color: #ffffff;
  vertical-align: middle;
  display: inline-block;
  width: 4px;
  height: 13px;
}
a .open {
  background-image: url('http://img11.hostingpics.net/thumbs/mini_161877bracketleft.gif');
}
a .close {
  background-image: url('http://img11.hostingpics.net/thumbs/mini_762032bracketright.gif');
}

<p>
  some text <a href="#"><span class="open"></span>some link<span class="close"></span></a>
</p>

Answer 2

我建议你用2个跨度来甩掉你做的方式，而只用1个来做。

.state::before {
   content: '';
   display: inline-block;
   width: 5px;
   height: 15px;
   background-image: url('http://img11.hostingpics.net/thumbs/mini_161877bracketleft.gif');
}
.state::after{
   content: '';
   display: inline-block;
   width: 5px;
   height: 15px;
   background-image: url('http://img11.hostingpics.net/thumbs/mini_762032bracketright.gif');
}

<p>
   some text <a href="#"><span class="state">some link</span></a>
</p>

你应该根据自己的需要做一些调整，但那是基础。

Answer 3

将vertical-align:middle与a .open和a .close一起使用。

a {
  display: inline-block;
  height: 50px;
  padding-left: 5px;
}
a span {
  background-repeat: no-repeat;
  background-color: #ffffff;
  display: inline-block;
  width: 4px;
  height: 13px;
}
a .open {
  background-image: url('http://img11.hostingpics.net/thumbs/mini_161877bracketleft.gif');
  vertical-align: middle;
}
a .close {
  background-image: url('http://img11.hostingpics.net/thumbs/mini_762032bracketright.gif');
  vertical-align: middle;
}

<p>
  some text <a href="#"><span class="open"></span>some link<span class="close"></span></a>
</p>

链接内的跨度高度被截断

3 个答案: