ブログパーツとか: CSSシミュレータ（background-image:url()）　画像2枚以上用

【使い方】textareaの中身（値）を書き換えて色々と試してみる

画像1枚用はこちら

サンプル画像（小）

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1r95FIoQkIjLGXVn13yTM0xhv7c_FRZ0kmzXdafsosJGPSRcW5YLecZ0TMByUdjCMdXnqUedVHVPnUXFBvSZs4gBSQGTOOTweJN5sHHkah7NMrlsI8s2dsCK6N_84CcDMteykb2FqoKUK/s1600/%25E7%25AC%2591%25E9%25A1%2594.png

サンプル画像（大）

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuqCIHi4LLEQxPlw-fB3Sur9AsiL44ZGi1HmpteZWCOPi7sbkm2XcioodaiDHuvcEwCVCH4W7cniD6HKadKMJ-dbA1FXsZR2NME_EgkyXiYwdiq8NwiIQC9WLLG_MSk5IVetBbCme3f4Dh/s1600/%25E7%258C%25BF%25E4%25B8%2589.png

①背景色 / background-color
　カラーネーム、カラーコード、RGB、RGBAで指定する
　初期値はtransparent（透明）

②背景画像 / background-image
　初期値はnone

③画像の繰り返し表示 / background-repeat
　no-repeat / 1回限り、繰り返しなし
　repeat / 縦横両方向に繰り返し
　repeat-x / 横方向に繰り返し
　repeat-y / 縦方向に繰り返し
　round / 画像の縦横比で調節
　space / 余白で調節

④背景の表示領域 / background-clip（background-colorで確認すればわかりやすい）
　border-box / borderとpaddingを含む領域に表示
　padding-box / borderを除きpaddingを含む領域に表示
　content-box / borderとpaddingを除く領域に表示

⑤画像の表示起点 / background-origin
　padding-box / borderを除きpaddingを含む領域の左上が起点
　border-box / borderとpaddingを含む領域の左上が起点
　content-box / borderとpaddingを除く領域の左上が起点

⑥画像サイズ / background-size /
　auto / オリジナルサイズ
　contain / 表示領域に入り切る最大サイズ
　cover / 表示領域を埋め尽くす最小サイズ
　px / 横縦の順に指定（1つだけ指定すればwidth、heightはauto）
　% / 横縦の順に指定（表示領域に対する割合、1つだけ指定すればwidth、heightはauto）

⑦画像の表示位置 / background-position（px, %は左上が起点）
　左上 / left top = 0% 0% = left 0% top 0% = right 100% bottom 100%
　中上 / center top = 50% 0% = left 50% top 0% = right 50% bottom 100%
　右上 / right top = 100% 0% = left 100% top 0% = right 0% bottom 100%
　右中 / right center = 100% 50% = left 100% top 50% = right 0% bottom 50%
　右下 / right bottom = 100% 100% = left 100% top 100% = right 0% bottom 0%
　中下 / center bottom = 50% 100% = left 50% top 100% = right 50% bottom 0%
　左下 / left bottom = 0% 100% = left 0% top 100% = right 100% bottom 0%
　左中 / left center = 0% 50% = left 0% top 50% = right 100% bottom 50%
　中央 / center = 50% = left 50% top 50% = right 50% bottom 50%

⑧画像の移動 / background-attachment
　scroll / スクロール
　fixed / 固定
　local / 子要素でもスクロール

⑨背景色と背景画像、背景画像同士の混合 / background-blend-mode
　normal /
　multiply /
　screen /
　overlay /
　darken /
　lighten /
　color-dodge /
　color-burn /
　hard-light /
　soft-light /
　difference /
　exclusion /
　hue /
　saturation /
　color /
　luminosity /

HTML

<div id="backgroundImageDisplay2"></div>

<⚠textarea style="width:99%;height:650px;font-family:monospace;" id="backgroundImageTextarea2" onInput="backgroundImageSimulator2();">
<style>
#backgroundImageDisplay2 {              /*背景画像を複数設置する場合は「,」で区切る*/
    width:100%;height:300px;border:10px dashed lime;padding:20px;box-sizing:border-box;
    background-color: transparent ;     /*①背景色*/
    background-image: url(" none ") ,   /*②背景画像（手前のレイヤー）*/
                      url(" none ") ,
                      url(" none ") ,
                      url(" none ") ,
                      url(" none ") ;   /*②背景画像（奥のレイヤー）*/
    background-repeat: repeat ,
                       repeat ,
                       repeat ,
                       repeat ,
                       repeat ;         /*③画像の繰り返し表示*/
    background-clip: border-box ,
                     border-box ,
                     border-box ,
                     border-box ,
                     border-box ;       /*④背景の表示領域*/
    background-origin: padding-box ,
                       padding-box ,
                       padding-box ,
                       padding-box ,
                       padding-box ;    /*⑤画像の表示起点*/
    background-size: auto ,
                     auto ,
                     auto ,
                     auto ,
                     auto ;             /*⑥画像サイズ*/
    background-position: left top ,
                         left top ,
                         left top ,
                         left top ,
                         left top ;     /*⑦画像の表示位置*/
    background-attachment: scroll ,
                           scroll ,
                           scroll ,
                           scroll ,
                           scroll ;     /*⑧画像の移動*/
    background-blend-mode: normal ,
                           normal ,
                           normal ,
                           normal ,
                           normal ;     /*⑨背景色と背景画像、背景画像同士の混合*/
   }
</style>
<⚠/textarea><!--⚠は削除する-->

JavaScript

<script>
var backgroundImageSimulator2=function(){
    document.getElementById("backgroundImageDisplay2").innerHTML=document.getElementById("backgroundImageTextarea2").value;
   }
onLoad=backgroundImageSimulator2();
</script>

2020年4月4日土曜日

CSSシミュレータ（background-image:url()） 画像2枚以上用

CSSシミュレータ（background-image:url()）　画像2枚以上用