このようなランダムなテキスト タイトルのボックスを作成したい: http://oi44.tinypic.com/1tu4xz.jpg
私はこれを静的 (変更されていない) テキストでコーディングする方法を知っていますが、k はランダムな可変長テキストと境界線でこれを効果的に行う方法を知りません。背景が透けて見えるようにすることが重要です。
お願いします、何か知っていますか?これは、同様のソリューションへの参照に過ぎない可能性があります。
このようなランダムなテキスト タイトルのボックスを作成したい: http://oi44.tinypic.com/1tu4xz.jpg
私はこれを静的 (変更されていない) テキストでコーディングする方法を知っていますが、k はランダムな可変長テキストと境界線でこれを効果的に行う方法を知りません。背景が透けて見えるようにすることが重要です。
お願いします、何か知っていますか?これは、同様のソリューションへの参照に過ぎない可能性があります。
次のようなフレームで通常のボックスを作成します。
<div style="border:1px solid black"></div>
次に、タイトル、背景色:白、およびいくつかのパディングを含む要素をボックスの上に挿入します。次に、この要素は境界線の一部を覆います。
もちろん、白い色の代わりに title 要素の背景画像を設定することもできます。これも機能します。
fieldset
とlegend
要素で遊んでみてください。それらは通常フォームで使用されますが、ここで必要なものを達成するための簡単なソリューションを提供することは確かです.
次のようなことを試すことができます:
<fieldset>
<legend>Title text</legend>
<p>Your random content ;-)</p>
</fieldset>
そしてあなたのCSSでは次のようになります:
legend {
text-align:center;
padding:0 20px;
}
fieldset {
border:2px dotted #000;
}
凡例と境界線を通してボディの背景を見ることができます。
これは jsfiddle です(追加の例としてボーダー画像を使用しています)。