1

http://i.imgur.com/CQpv1Wm.jpg

テキストの後ろの行は CSS だけで実現できますか?

4

6 に答える 6

4

はい、できます。

画像もテーブルもありません。2 つの要素とシンプルな CSS だけです。

これを示すためのフィドルがあります：http://jsfiddle.net/URrdP/

HTML:

<div> <span>Text Here</span> </div>

CSS:

div {
    font-size: 45px;
    border: #EEEEEE inset 2px;
    position: relative;
    text-align:center;
    height: 0px;
}
span {
    position: relative;
    top:-0.7em;
    background: #CCCCCC;
}

ここでの重要な点は、外側の要素には挿入された境界線があり、高さはゼロであり、内側の要素は外側の要素の境界線の上に位置するように半行上に配置されていることです。

もう 1 つの重要なポイントは、内側の要素の背景色が単色であることです。そうしないと、境界線が透けて見えてしまいます。これは、無地の背景の上に配置した場合にのみ、このテクニックが実際にうまく機能することを意味します。グラデーションや画像の上に置くとうまくいかない場合があります。

私の例では、色やフォントのサイズが完璧ではないかもしれませんが、原則は完全にうまくいくはずです。

CSS ボーダーinsetは、完璧なカラー マッチを得るための最良の方法ではない場合があります。色をより細かく制御する必要がある場合は、 と に個別の色を指定できborder-topますborder-bottom。

于 2013-05-28T20:40:00.797 に答える
1

画像なしで同様のことを行う方法を次に示します。

HTML:

<h1><span>Text Here</span></h1>

CSS:

body, span { background: #ccc; }

h1 { text-align: center; border-bottom: 1px solid #333; font-size: 20px; height: 10px; }

JSFiddle http://jsfiddle.net/ChrisLTD/fvetd/

于 2013-05-28T20:39:40.890 に答える
1

画像バージョンなし (ただし、display:table バージョンの方がいいと思います)

CSS:

body
{background:silver;}

h1
{text-align:center;color:white;font-weight:normal;position:relative;
line-height:1;text-shadow:0 1px black;font-size:34px;font-family:georgia, serif}

h1::before, h1::after
{width:100%;border-bottom:1px white solid;content:' ';
position:absolute;top:50%;left:0;}

h1::after
{margin-top:-1px;border-color:gray}

h1 > span
{background:silver;position:relative;z-index:1;}

HTML: 

<h1>
  <span>
    Text Here<br>
    On Multiple Lines too
  </span>
</h1>

デモ: http://jsbin.com/uqexar/1/edit

于 2013-05-28T20:44:09.440 に答える
0

HTML仕様がなかったので、数span秒で追加しました

<h1>
  <span class="wrapper">
    <span class="text">TEXT HERE</span>
    <span class="line"></span>
  </span>
</h1>

CSS:

h1 {
    width:300px;
    background:#dcdcdc;
    padding:10px;
    text-align:center;
    color:#333;
}
.wrapper {
    display:block;
    position:relative;
}
.line {
    display:block;
    height:1px;
    background:#cecece;
    border-bottom:1px solid #e3e3e3;
    width:100%;
    position:absolute;
    top:50%;
    z-index:100;
}
.text {
    z-index:200;
    position:relative;
    padding:10px;
    background:#dcdcdc;
    display:inline-block;
}

これは、線が 2 つの灰色で指定したように見えることを意味します。

http://jsfiddle.net/3q5he/

于 2013-05-28T20:53:48.520 に答える