Блог

Я хотел бы разместить заголовки на своем сайте следующим образом: http://cl.ly/0m3F0j392e0G1n0s0T34 Что бы я в идеале хотел сделать, так это использовать текст для заголовка, а затем сделать так, чтобы gif размером 10 на 10 пикселей повторялся горизонтально после него.

РЕДАКТИРОВАТЬ: я должен добавить, что я хотел бы использовать текстурированный фон, поэтому я не могу установить какие-либо сплошные цвета для элемента h2.

Я смог добавить gif после заголовка, но я не могу заставить его повторяться, даже если добавлю repeat-x. Вот код, который я использовал:

 h2:after {
content: 'url(img/imagehere.gif) repeat-x';
}
 

Существуют ли какие-либо обходные пути для этого или какие-либо альтернативные методы? Я бы предпочел не прибегать к нарезке всего заголовка в виде изображения. Я думал о том, чтобы переместить заголовок влево, а затем переместить пустой div вправо с gif в качестве повторяющегося фонового изображения, но я полагаю, что для этого предназначен псевдоэлемент:after, верно?

Немного халтурно и будет включать добавление overflow-x:hidden; к родительскому элементу, но должно сработать:

 h2 {
    position: relative;
    padding-right: 10px;
    float: left;
    }
h2::after {
    content: '';
    position: absolute;
    left: 100%;
    right: 9999px;
    background: url(image.gif);
    height: 10px;
    width: 9999px;
    }
 

Вы можете установить любые атрибуты для своего псевдоэлемента after. Что бы я сделал, это установил для содержимого значение «» (пустое), а затем установил ширину и высоту для псевдоэлемента. Тогда вы можете установить фон для повторяющегося gif как обычно.

 h2:after {
  content: "";
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}
 

При использовании content:url() класса pressed создайте img элемент. Вам нужно использовать background в этом случае. Нравится то, что сказал Эрик.

Но если размер вашего текста в заголовке неизвестен (он же динамический контент), то псевдоэлемент не является хорошим решением. Вы можете использовать разметку, подобную этой:

 <h1><span>your text content</span></h1>
 

А затем добавьте повторяющийся фон в h

 h1{ background:'url(img/imagehere.gif) repeat-x';}
 

Чтобы скрыть фон в той части текста, которая отображается, сделайте span фон сплошным цветом

 span{background:white} 
 

Обновить:

если у вас есть фоновое изображение под вашим h1 , то вы можете сделать это:

Тот же HTML: <h1><span>your text content</span></h1>

CSS:

скажем, у вас body есть фоновое изображение:

 body{background-image:(foo)}
 

затем вы хотите bar , чтобы ваше изображение повторялось после заголовка. Вы должны сделать это:

 h1{background:url(bar)}
 

И добавьте тот же фон body span , который у вас есть, к тексту, содержащему ваш текст:

 h1 span{background-image:(foo)}
 

Это решило бы вашу проблему. Посмотрите на эту скрипку, чтобы увидеть в действии. Это не зависит от вашего размера текста или чего-либо еще.

Примечание: если вы используете span , то вы должны сделать это dispaly:inline-block

Обновить:

Основываясь на вашем запросе, я переосмысливаю это. Я использовал tables это время. Код без объяснения:

HTML

 <table>
    <tbody>
        <tr>
            <td><h1>Heading</h1></td>
            <td class="pattern"></td>
        </tr>
    </tbody>
</table>
 

CSS

 body{background:url(foo)}
table, tbody, tr{width:100%;}
.pattern{background:url(bar); width:100%;}
 

Смотрите в действии<

Приведенный выше ответ от Эрика Хинтона будет работать, если вы добавите объявление «display: block», как показано ниже:

 h2:after {
  content: "";
  display:block;
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}