画像の上にテキストを（半透明の背景を持つ）書き

次世代のサイトやブログを参照するのが一般的となる効果は、しばしば暗い半透明の背景を伴って、画像の上に 、いわゆるオーバーレイで書かれています。 次に例を示します。

この記事では、CSSを使用して、私たちの画像の上書きを行います。

まず最初に、このようなHTML構造を作成することです。

 <div class="boximg">



  



邵src="tramonto.jpg"/>を<img



  



 <div class="boxtesto">



    



 <span class="testo">美しい夕日！</ SPAN>



  



 </ DIV>







 </ DIV>

ご覧のように私は私のイメージの位置をその中DIVコンテナ（クラス付き"。Boximg"）と順番に適用するテキストをマークする範囲を含む新しいdivを（クラスと"。Boxtesto"）を作成。

私たちは今、CSS、実質的に、職場を見てみましょう：

 。Boximg {



  



位置：相対;



  



幅：400ピクセル; /画像の*と同じ幅* /



  



高さ：300ピクセル; / *同じイメージの高さ* /







 }







 {div.boxtesto



  



位置：絶対;



  



底：0px;



  



左：0px;



  



幅：100％;



  



背景：RGB（0、0、0）;



  



背景：RGBA（0、0、0、0.6）;







 }







 {span.testo



  



パディング：10pxの;



  



色：＃FFFFFF;



  



フォント：太字24px/45pxのHelvetica、サンセリフ系;



  



のletter - spacing：- 1pxの。







 }

ストレージボックス（"。Boximg"）と同じ大きさと対応するように意図されているイメージへの相対的な位置を持っています。
テキストの収納ボックスは、（"。Boxtesto"）の要素の通常の流れからそれを削除し、その容器の左下隅に配置されていると明らかに100％に幅を持っている絶対位置を、持っている私たちの仕事の焦点となって水平方向に使用可能な全領域を占有する。 面白い、そして、暗い背景を定義し、半透明になるRGBおよびRGBAを使用してバックグラウンドの2つの定義。
スパン。"テキスト"は、最終的に、テキストのスタイルを設定し、少しは'paddingを適用する唯一の目的を持っています。

• <<
• 1
• 2
• >>