私の背景の添付ファイル：固定が動作していません

-1

＃main2 divの上に#main divのスクロールをしようとしています。私は絶対に両方を配置し、background-attachmentを使用しました。＃main2に固定しましたが、意図した効果が働いていないようです。 "上をスクロールする"というのは、マウスを下にスクロールすると#mainが固定＃main2にスクロールしなければならないということです。＃main2は本体の背景画像と似ていなければならず、＃main1は本体の一番下までスクロールダウンします。私の背景の添付ファイル：固定が動作していません

https://www.youtube.com/watch?v=GJLzP_4bg3o @ 7：50は私が複製しようとしているものです。

body { 
 
    margin: 0 auto; 
 
} 
 

 
#main { 
 
    position: absolute; 
 
    width: 100%; 
 
\t height: 100%; 
 
\t background-color: red; 
 
} 
 

 
#main2 { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: blue; 
 
    top: 100%; 
 
    background-attachment: fixed; 
 
}

<!Doctype HTML> 
 
<head> 
 
    <html lang="en" 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="clc.css"> 
 
    <title>CLC Website</title> 
 
</head> 
 

 
<body> 
 
    <div id="main">   
 
    </div> 
 
    <div id="main2"> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-04-14 noddy

スクロールの意味がわかりません。多分あなたは明確にすることができますか？また必要な添付ファイルですか？ –

「意図した効果」とは何ですか？あなたのコードは、あなたが提供したスニペットに関して何をすべきかを正確に行います。 – Paul

'background-attachment'は、' background-image'が指定されていると動作します。このリンクを参照してくださいhttps://developer.mozilla.org/en/docs/Web/CSS/background-attachment – Pugazh

ヘルプおうち場合は、これを確認してください。

<head> 
    <style> 
     .main { height: 300px; width: 300px;background-color: blue; background-repeat: no-repeat; background-attachment: fixed; 
position: fixed;} 
    </style> 
</head> 
<body> 
    <div class="main"></div> 
    <div style="background-color: red; height: 3000px; width: 300px"></div> 
</body>

出典

2016-04-14 06:53:56 Dev

とコード – Dev

合意してください...恐ろしい横スクロール... grrr ... –

だけposition: fixed;に#mainを変更し、視差効果を得るために、私はちょうど背景画像の背景色を変更z-index: 1;

body { 
 
    margin: 0 auto; 
 
} 
 

 
#main { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    z-index: 1; 
 
} 
 

 
#main2 { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: blue; 
 
    top: 100%; 
 
    background-attachment: fixed; 
 
}

<!Doctype HTML> 
 
<head> 
 
    <html lang="en" 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="clc.css"> 
 
    <title>CLC Website</title> 
 
</head> 
 

 
<body> 
 
    <div id="main">   
 
    </div> 
 
    <div id="main2"> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-04-14 07:08:08 ketan

与え、それが今で正常に動作します。

出典

2016-04-17 13:32:56 noddy

私の背景の添付ファイル：固定が動作していません

答えて

関連する問題