2017-01-28 17 views
0

画像キャプション問題

h2 span.spacer { 
 
    padding:0 5px; 
 
} 
 
h2 span { 
 
    color: white; 
 
    font: bold 24px/45px Helvetica, Sans-Serif; 
 
    letter-spacing: -1px; 
 
    background: rgb(0, 0, 0); /* fallback color */ 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 10px; 
 
} 
 
h2 { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 0; 
 
}
<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>

Grettings!

私は、以下のコードに示すように、画像をキャプションするファンキーな方法を開発しました。しかし、あなたが見ることができるように、最初の行の終わりと2行目の間のスペースを含む暗い色である2行目の終わりに黒いブロックがあります。

解決方法はありますか?

ありがとうございました。このよう

h2 span.spacer { 
 
    padding:0 5px; 
 
} 
 
h2 span { 
 
    color: white; 
 
    font: bold 24px/45px Helvetica, Sans-Serif; 
 
    letter-spacing: -1px; 
 
    background: rgb(0, 0, 0); /* fallback color */ 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 10px; 
 
} 
 
h2 { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 0; 
 
}
<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>

答えて

0

h2 span.spacer { 
 
    padding:0 5px; 
 
} 
 
h2 span { 
 
    color: white; 
 
    font: bold 24px/45px Helvetica, Sans-Serif; 
 
    letter-spacing: -1px; 
 
    background: rgb(0, 0, 0); /* fallback color */ 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 10px; 
 
    display: inline-block; 
 
} 
 
h2 { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 0; 
 
}
<h2><span>This is the first line.<span class="spacer"></span><br/><span class="spacer"></span>This is the second line.</span></h2>

0

UPDATE:2つのスパン

この間取り外したライン、右?何が起こっているのかわからない、私はこれを投稿するとき、それは普通のHTMLだけを示す:/あなたがそれを正しく見ていることを望む。

h2 span { 
 
    color: white; 
 
    font: bold 24px/45px Helvetica, Sans-Serif; 
 
    letter-spacing: -1px; 
 
    background: rgb(0, 0, 0); /* fallback color */ 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 9px 10px; 
 
} 
 
h2 { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 0; 
 
}
<h2><span>This is the first line.</span><br/><span>This is the second line.</span></h2>

結果: enter image description here それが役に立てば幸い!おかげで -

+0

を試してみてください。その方が良いですが、テキストを互いに整列させたいだけです。しかし、それは私が経験していたブロックを取り除いています。 –

+0

更新しました!これが解決することを願っています。 – mindOfAi

+0

鮮やかに見える、ちょうど私がその行を取り除く方法を疑問に思った。 2つの要素の重なり。ご協力いただきありがとうございます。 –

0

は、はい、私は罰金、ここでそれを見ているこの

h2 span.spacer { 
 
    
 
} 
 
h2 span { 
 
    color: white; 
 
    font: bold 24px/45px Helvetica, Sans-Serif; 
 
    letter-spacing: -1px; 
 
    background: rgb(0, 0, 0); /* fallback color */ 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 10px; 
 
} 
 
h2 { 
 
    position: absolute; 
 
    top: 80px; 
 
    left: 0; 
 
}
<h2><span>This is the first line.</span><br/><span>This is the second line.</span></h2>