• css3

    背景指定

    2012/10/02

    背景の指定の仕方いろいろ

    bg.png

    css3で背景指定についても色々なことができるようになりました。
    背景グラデーションについてはこちらで!(参考:【CSS3】グラデーション

    ※webkit対応ブラウザ(safari/Chrome)で見てください。
     

    背景画像の複数指定


    ひとつの要素に対して複数の背景画像を指定できるようになりました。
    書き方は通常の背景指定と同じで、カンマ区切りで書きます。
    重なり順は前に指定しているものほど上になります。


     

    
    background: url(img/flog.png) center bottom no-repeat, url(img/sea.jpg) no-repeat;
    
    

    え!素敵!!!

    海の写真の上にカエルちゃんを重ねたんですが、まるで温泉にはいっているようですね!



    背景の適用範囲


    背景を表示させる範囲を指定します。

    
    -webkit-background-clip: border-box; //ボーダーも含めた範囲
    -webkit-background-clip: padding-box; //パディング領域から内側
    -webkit-background-clip: content-box; //コンテンツ内
    
    

    わかりやすいように、破線ボーダーをひきました


    ボーダーも含めた範囲(border-box)
    ボーダーの下にも
    背景が適用されています。

    
    -webkit-background-clip: border-box;
    
    

    パディング領域から内側(padding-box)
    ボーダーのすぐ内側から
    背景が適用されています。

    
    -webkit-background-clip: padding-box;
    
    

    コンテンツ内(content-box)
    paddingをとったコンテンツ中身にのみ
    背景が適用されています。

    
    -webkit-background-clip: content-box;
    
    


    背景の基準位置を指定

    
    -webkit-background-origin: border-box; //ボーダーを基準(0 0)〜(100% 100%)
    -webkit-background-origin: padding-box; //パディング領域を基準(0 0)〜(100% 100%)
    -webkit-background-origin: content-box; //コンテンツ領域を基準(0 0)〜(100% 100%)
    
    

    基準点は(0 0)の左上がデフォルトになっています。
    基準位置を変更する場合はbackground-positionで指定します。


    わかりやすいように、ボーダーに透過をかけました


    ボーダーを基準(border-box)
    ボーダーの下にも
    背景が適用されています。

    
    -webkit-background-origin: border-box;
    
    

    パディング領域から内側(padding-box)
    ボーダーのすぐ内側が
    基準に背景が適用されています。

    
    -webkit-background-origin: paddign-box;
    
    

    コンテンツ内(content-box)
    paddingをとったコンテンツが
    基準に背景が適用されています。

    
    -webkit-background-origin: content-box;
    
    


    背景画像のサイズ指定

    
    -webkit-background-size: contain; //背景画像全体が表示される
    -webkit-background-size: cover; //背景画像で全体を覆う
    -webkit-background-size: 値; //実数値+単位、auto
    
    

    背景画像の表示サイズを指定します。


    カエルちゃんにも飽きたんで画像かえます!


    縦横比率を維持したまま
    要素に合わせ
    拡大・縮小され、画像全体が
    表示されるサイズになります

    
    -webkit-background-size: contain;
    
    

    縦横比率を維持したまま
    背景画像で
    要素全体を覆うサイズになります

    
    -webkit-background-size: cover;
    
    

    数値とautoを指定すると、
    数値を指定した方に合わせ
    自動的に計算され表示されます

    
    -webkit-background-size: 250px auto;
    
    

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back