2010年03月14日

背景画像 スタイルシート、CSS

スポンサード リンク

background-imageプロパティ
要素に背景画像を指定します。  



 p 要素に
背景画像を設定.....

リンクに 背景画像   
今のブログで満足ですか?
FC2レンタルサーバーLiteでホームページを作る!

サンプルソース

<html>
<head>
<title>指定した要素に背景画像を設定</title>
<style type="text/css">
<!--
  .bgImge{
    background-image: url(******.gif) ;
    color : black;
    background-color: green;

    }
-->
</style>
</head>
<body>
   <form>
<textarea rows="6" cols="50" class="bgImge">
テキストエリアに
   背景画像を使う.....
</textarea><br>
 <input type="text" class="bgImge" size="40" value="テキストボックス">
  </form>
<p style="width: 300px; height: 50px;
border: 1px dashed gray;" class="bgImge">p 要素に<br>
背景画像を設定.....</p>
<a href="#" class="bgImge">リンクに 背景画像</a>
   </body>
   </html>

background-image: url(******.gif);
  url()
に表示する画像ファイルのURLを指定します。
画像は指定した要素の大きさに応じて全面に敷き詰められます。また
background-image: none;で背景画像を指定しない。 になります。

  同じ要素に背景色が指定されている場合は背景画像が優先して表示されます。
このサンプルでは背景色として background-color: green;
指定していますが、全く反映されていません。しかし何らかのアクシデントで
背景画像が表示されなかった場合こんな事になります。
     文字が読みづらいです。
背景色は文字色とのコントラストを考えて設定しましょう....
文字の色,背景色の 色の組み合わせのチェック  216色 ウェブセーフカラー

background-image プロパティの適用対象はすべての要素になります。
チェックボックス、ラジオボタンに背景画像を設定しました。
なかなか好い感じです。(残念ながら FireFox では背景画像は入りません)

CSS: 背景あり: 背景なし:
使用している画像はです。20px × 20px 。

Textarea テキストエリア
ラジオボタン,チェックボックスをスタイルシートcss で装飾
スタイルシート CSS
CSSだけでおこなう、画像の入れ替えとポップアップ
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 20:53 | 大阪 ☀ | 背景 背景画像 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。