Глядя на <hr> и <h3> вместе

Как вышеприведенный пример. Я нашел полезный script с небольшим img, который мне нравится, но я не знаю, как получить прописку о названии, чтобы линия не проходила прямо.

h3.line {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url(../images/line.jpg);
    background-origin: padding-box;
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto auto;
    display: block;
    margin-bottom: 20px;
}

Что показывает это.

Любое предложение или идеи?

Ответы

Ответ 1

Вы можете поместить <span>, например, в <h3> и сделать его тем же, что и ваш <h3>, но без строки, чтобы <span> эффективно перекрывал <h3>.

Вы можете сказать это своему диапазону:

span {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

чтобы сделать его центром. Вы можете добавить к нему ширину и высоту. line-height помогает разместить текст в середине по вертикали.

Если вы хотите сохранить изображения, чем вы можете использовать text-decoration: line-through;, чтобы нарисовать строку в тексте.

Ответ 2

У вас может быть 1px-точечное изображение, которое вы можете разместить в качестве фона на H3. Затем введите элемент span, между которым есть фон.

CSS

h3 {
    background: url(images/dot.png) left center repeat-x;
    padding: 10px;
    text-align: center;
}
h3 span { background: #fff; display: inline-block; padding: 10px 15px; }

HTML:

<h3><span>About</span></h3>

Ответ 3

Вот решение, использующее свойство рамки CSS вместо изображения.

html:

<h2>
  <span>This is a test</span>
  <div></div>
</h2>

И вот CSS:

h2 {
    text-align:center;
    background-color:#EFEFEF;
    line-height:26px;
    position:relative;
}

span {
    background-color:#EFEFEF;
    padding-right:5px;
    padding-left:5px;
    position:relative;
    z-index:2;
}
h2 > div {
    border-bottom:1px solid grey;
    position:relative;
    z-index:1;
    top:-13px; /* half the line-height of the containing element */
}

Скрипка Демонстрация

<div> помещается внутри элемента заголовка и позиционируется на полпути вверх, устанавливая его верхнее положение на половину высоты элемента заголовка, который является строкой строки-высоты. z-index используется на span и div, так что span получает более высокий порядок стека, чем div, и затеняет (границу) линию, где есть перекрытие.

Ответ 4

Я просто наткнулся на другой способ достижения этого.

h1
{
    position: relative;
    padding: 0 26%;
}

h1:before,
h1:after
{
    width: 25%;
    background-color: rgba( 0, 0, 0, .5 );
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
}

Взято из: http://osvaldas.info/blog/background-independent-css-bars