このブログを検索

2020年5月23日土曜日

スクロールしていくと画像が流れるように出現して下がると隠れるCSS



background-attachment: fixed;

で背景画像の位置が固定される?

例:
.chapter2 {
    background-attachment: fixed;
    max-width: inherit;
}

.chapter2 {
    width: auto;
    height: 100%;
    position: relative;
    background-size: cover;
}

.chapter2 {
    background-image: url(../img/bg1.jpg);
}

他にも使うかもしれないプロパティ

background-position: center center; ←背景画像の位置
background-repeat: no-repeat; ←背景画像をリピートさせるか、させないか
background-size: ←背景画像のサイズを指定できる%やpixcelなど

auto
自動的に算出される(初期値)
contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
長さ
背景画像の幅・高さを指定する
パーセンテージ
背景領域に対する背景画像の幅・高さのパーセンテージを指定する

こんな感じでサイズ指定もできる
background-size:20px 20px;

https://6bitamemo.blogspot.com/2017/11/htmlcss.html

http://www.htmq.com/css3/background-size.shtml

makeshopでは

.chapter {
    background-attachment: fixed;
    max-width: inherit;
    width: 100%;
    height: 350px;
    position: relative;
    background-size: 100%;
    clear: both;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(https://*********/*********/*********/*********);
    display: inline-block;
    margin-top: 48px;
}

注目の投稿

じぇらいす まちおこし

人気の投稿