Стилизация списка в виде вкладок с фоном, перетекающим в контент

Question

Я не мог придумать лучшего способа назвать этот вопрос, но я объясню.

У меня есть сайт mediawiki с фоновым рисунком (например, пергамент) за статьями. В верхней части каждой статьи я хочу иметь вкладки, как в Википедии (со ссылками page | talk | edit и т. Д.).

Проблема в том, что вкладки должны легко соответствовать фону статьи, и я не могу понять, возможно ли это на самом деле.

То, как я пытался это сделать, это расположить список внутри фактического div содержимого и дать элементам

прозрачный фон, но, насколько я вижу, нет способа закрасить остальную часть

• .

  У кого-нибудь есть идея?

Answer 1

Вы можете иметь <ul> вне содержимого <div> и использовать background-position свойство CSS , чтобы расположить фон для содержимого <div> и переместить его на высоту <ul>. Что-то вроде следующего (обратите внимание, что это не проверено, просто пытаюсь дать вам общее представление):

<style>
  #links {
    background-image: url('/images/myawesomebackground.png');
    height: 20px;
  }

  #content {
    background-image: url('/images/myawesomebackground.png');
    background-position: 0px 20px;
  }
</style>

<ul id='links'>
  <li>Link 1</li>
  <li>Link 2</li>
</ul>

<div id='content'>
 Stuff goes here...
</div>

Answer 2

Это действительно невозможно. Вместо этого я бы выделил li элементам толстую черную рамку слева и справа.