HTMLの背景と固定CSS--

効果：

左画像のうち、画面は適切な不規則な画像、のためではなくテキストの左側をブロックしないようにするために、画像が固定されている特定の位置の後に左に移動します。

 

方法：

ページに浮かぶ絵を作り、背景画像の幅と絶対位置を設定します。（テキストは右側に右のプロパティを追加した場合）画像が左に移動しないようにJSが内側と、その後、ページは、テキストの画像ブロックの左に少しを引き起こす左属性に画像を追加しますウィンドウの現在の大きさを決定します。

HTML

< 本体> 
    < IMGのクラス= "backImg" SRC = "IMG / backimg.png" > 
    < DIV ID = "コンテナ" > 
    </ DIV > 
</ ボディ>

CSS

ボディ { 
    マージン：0PX。
    最小幅：1920px ; 
    分の高さ：800ピクセル ; 
    オーバーフロー：隠されました ; 
} 

.backImg { 
    幅：1530px。
    位置：絶対 ; 
    右：0 ; 
    トップ：0 ; 
} 

#container { 
    位置： 固定されました。
　　 下： 250ピクセル; 
　　 幅：383px ; 
    表示：フレックス。
    フレックス方向：コラム。
    正当化-コンテンツ：センター ; 
    margin-left：131px ; 
}

JS

window.onload = 関数（）{
     場合（$（ウィンドウ）.width（）<= 1660 ）{ 
        $（ '.backImg '）のattr（'スタイル'、 '左：150ピクセル;'。）; 
    } 
} 
$（ウィンドウ）.resize（関数（）{
     場合（$（ウィンドウ）.width（）<= 1660 ）{ 
        $（ '.backImg '）ATTR（'スタイル'、 '左：150ピクセル;' ）; 
    } 
    他{ 
        $（ '.backImg '）removeAttr（'スタイル'。）; 
    } 
}）