用線條造型標題

從某種意義上說，這很簡單，但我一直試圖弄清楚這個問題現在幾個小時，所以我決定寫下這個問題，也許在你的幫助下我可以找到一個解決方案。用線條造型標題

在佈局標題（h1，h2，h3）旁邊有一行。基本上是這樣的：

示例標題--------------------------------------- -----

另一個示例標題---------------------------------

一個更多 - - - - - - - - - - - - - - - - - - - - - - - - - -----

這就是最終結果（-----是gfx作爲背景圖像）。你會怎麼做？背景顏色可能會改變和/或不透明。

一件事是什麼我想會是這樣：

<h1><span>Example Heading</span></h1>

當CSS看起來艾克這樣的：

h1 { 
background-image: url(line.png); 
} 
h1 span { 
background: #fff; 
}

但由於背景顏色可以比白色別的東西（#FFF ）不起作用。

希望你明白我的問題：D

來源

2011-09-07 losippo

是'例標題------------------'東西，你已經擁有或者你想建立的東西到？ – adarshr

我想實現的是的。 – losippo

這是一個非常有趣的問題。目前我唯一想到的是可能以某種方式使用「display：table-cell」，但看起來有點討厭。 –

這對我有效。

HTML

<div class="title"> 
    <div class="title1">TITLE</div> 
</div>

CSS

.title { 
    height: 1px; 
    margin-bottom: 20px; 
    margin-top: 10px; 
    border-bottom: 1px solid #bfbfbf; 
} 
.title .title1 { 
    width: 125px; 
    margin: 0 auto; 
    font-family: Arial, sans-serif; 
    font-size: 22px; 
    color: #4c4c4c; 
    background: #fff; 
    text-align: center; 
    position: relative; 
    top: -12px 
}

來源

2011-09-07 11:03:31 Martin

類title1上有背景顏色#fff。標題的實際背景可以是白色，有些格雷迪，灰色，所以title1不能有任何背景色，它應該是透明的。基本上這與我之前嘗試過的是相同的，但是它的複雜版本tbh。 – losippo

我不認爲你可以用純CSS實現這一點，因爲標題文本可以是任何長度。這裏是一個動態的javascript解決方案，它根據標題文本的寬度設置線條圖像的寬度。

Click here for jsfiddle demo

HTML（可以是H1，H2或H3）

<div class="heading-wrapper"> 
    <h1>Example Heading</h1> 
    <img src="line.png" width="193" height="6" alt="" /> 
</div>

CSS

h1{font-size:16px} 
h2{font-size:14px} 
h3{font-size:12px} 
h1,h2,h3{margin:0;padding:0;float:left} 
.heading-wrapper{width:300px;overflow-x:hidden} 
.heading-wrapper img{ 
    float:right;padding-top:9px; 
    /*ie9: position:relative;top:-9px */ 
}

的jquery

setHeadingLineWidth('h1'); 
setHeadingLineWidth('h2'); 
setHeadingLineWidth('h3'); 

function setHeadingLineWidth(selector){ 
    var hWidth; 
    var lineWidth; 
    var wrWidth = $('.heading-wrapper').width(); 

    hWidth = $(selector,'.heading-wrapper').width(); 
    lineWidth = wrWidth - hWidth; 
    $(selector).siblings('img').width(lineWidth); 
}

標題寬度=包裝內的標題文本的寬度
線圖像寬度=包裝寬度 - 標題文本寬度

希望幫助:)

來源

2011-09-07 16:01:39 marissajmc

謝謝，這是一種方式，但我認爲不適合使用32bitkid提供的髒HTML和CSS。 – losippo

哈克不過，也許是這樣的：

HTML：

<h1> 
    <span>Test</span> 
    <hr> 
    <div class="end"></div> 
</h1>

而CSS：

h1 span{ float :left; margin-right: 1ex; } 
h1 hr { 
    border: none; 
    height: 1px; 
    background-color: red; 
    position: relative; 
    top:0.5em; 
} 
h1 div.end { clear:both; }

Fiddle here

來源

2011-09-07 16:47:10

快速和骯髒的勝利！ –

沒有漂亮的一個，但工作！我認爲這可能是沒有JS的唯一方法。 – losippo

是的。這不是可愛的，但至少它是純粹的CSS，並且應該是相當跨瀏覽器友好的，從我所能看到的。 –

用線條造型標題

回答

相關問題