использование фонового изображения для заголовков - PullRequest
Новая
       2

использование фонового изображения для заголовков

1 голос
/ 12 декабря 2011

У меня есть изображение, которое я должен использовать для своих заголовков, я не могу использовать фиксированное изображение, так как ширина заголовка изменяется в зависимости от текста заголовка, поэтому я сделал 3 фрагмента изображения, начиная с повторения, средний срез, который повторится с текстом и изображением конечного фрагмента, который должен закрыть заголовок, я включил изображение, и css, который я использую, конечный фрагмент не работает, может кто-нибудь сказать мне, что я делаю неправильно: 

<div class="product-item">
<div class="product-title">

<span><h3>@Model.Name</h3></span>

</div>

</div>

CSS: 

.product-grid .product-item .product-title
{
background-image: url('images/first-slice.png');
background-repeat: no-repeat;
background-position: 0% 0%;
height:37px;
 }
.product-grid .product-item .product-title span
{
background-image: url('images/last-slice.png');
background-repeat: no-repeat;
background-position: 100% 50%;
 height:37px;
 }

.product-grid .product-item .product-title h3
{
background-position: 50%;
background-image: url('images/middle-slice.png');
background-repeat: repeat-x;
 height:37px;
 margin-left:5px;
 }

Live test Сайт: Сайт

Первое изображение: First-slice среднее изображение: enter image description here Конечный срез: enter image description here

Ответы [ 4 ]

3 голосов
/ 12 декабря 2011

Основная проблема заключалась в том, что элемент h3 имеет ту же ширину, что и содержащий span.Этот span также был установлен на display:block, чтобы background-position функционировал.

Однако, как сказано в комментариях, для того, чтобы HTML также был действительным, этот диапазон должен быть изменен на div.

Затем я просто добавил margin-right:5px кЭлемент h3.

Наконец, чтобы текст располагался по центру, используйте line-height вместо height. 

.product-grid.product-item.product-title
{
    background-image: url('images/last-slice.png');
    background-repeat: no-repeat;
    background-position: 100%;
    line-height:37px;
}

.product-grid.product-item.product-title h3
{
    background-position: 50%;
    background-image: url('images/middle-slice.png');
    background-repeat: repeat-x;
    line-height:height:37px;
    margin-left:5px;
    margin-right:5px;
}

.product-grid.product-item.product-title div {
    background-image: url('images/first-slice.png');
    background-repeat: no-repeat;
    background-position: 0%;
    line-height:37px;
}
2 голосов
/ 12 декабря 2011

h3 (содержащий повторное среднее изображение) находится на верхней части диапазона, содержащего ваше правильное изображение.

Установите правильное изображение на h3 и повторное изображение на диапазоне - это должно исправить.

И лучше изменить диапазон на div, поскольку диапазон не может содержать блочные элементы, такие как h3 (семантически неверный)

1 голос
/ 12 декабря 2011

Добавьте больше div, было бы проще: 

<div id=wrapper>
 <div id="bg_header">&nbsp;</div>
  <div id="content">
  &nbsp;
  </div>
 <div id="bg_footer">&nbsp;</div>
</div>

Я делал это во многих проектах, и это работает во всех основных браузерах.

1 голос
/ 12 декабря 2011

Вы должны изменить: 

<span><h3>@Model.Name</h3></span>

на: 

<div><h3>@Model.Name</h3></div>

Проблема в том, что span является встроенным элементом, для которого установка height не будет работать.

<span><h3>@Model.Name</h3></span> также является недопустимым HTML.

Как указывает @ptriek, вам также необходимо поменять порядок фонов между элементами.

ЭтоCSS, который вам нужен (при условии, что вы изменили span на div): 

.product-grid .product-item .product-title
{
    background-image: url('images/middle-slice.png');
    background-repeat: repeat-x;
}
.product-grid .product-item .product-title div
{
    background-image: url('images/first-slice.png');
    background-repeat: no-repeat;
    background-position: left;
}
.product-grid .product-item .product-title h3
{
    background-image: url('images/last-slice.png');
    background-repeat: no-repeat;
    background-position: right;
    height: 37px;
    margin-left: 5px;
}
...