2017-03-27 18 views
-3

私はこの1つを手伝ってください。以下の効果を達成する方法を教えてください: here このウェブサイトでは、自転車の男の写真(独立系)です。どうすればそれを達成できますか(バックグラウンドでスクロールする)?申し訳ありませんが、私はhtml、cssを初めて使っています。背景画像::私はマスターが、以下のCSSプロパティを追加しようとしないんだけど アレクサンドラCSS/HTML効果の背景

+2

あなたがこれまでにしようとしているものをご提示ください。 –

+1

外部リンクを投稿するべきではありません。将来あなたのリンクが壊れてしまうと、この質問とその回答は時代遅れになるでしょう。あなたが望む効果は、 'position:fixed'、' z-index'、おそらく次のコンテナ内の 'margin-top'で実現できます。しかし、誰もあなたの仕事をして、それを打ち、あなたが何を試してどこでつかまえたのか編集しないでください。 –

+0

@AlexandraWinsは反応的な画像の背景について読んでいます –

答えて

0

あなたが望むのは、パララックスです。 指示に従って、尋ねるルールをお読みください。私たちの仕事はもっと楽になるかもしれません。

ここでスクロールしながら、バックグラウンドコンテンツ(すなわち画像)は、前景コンテンツとは異なる速度で移動されるウェブサイトの傾向how to do it:

ラスタースクロール約W3Cからガイドされます。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.parallax { 
 
    /* The image used */ 
 
    background-image: url("https://www.w3schools.com/howto/img_parallax.jpg"); 
 

 
    /* Set a specific height */ 
 
    min-height: 500px; 
 

 
    /* Create the parallax scrolling effect */ 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p> 
 

 
<div class="parallax"></div> 
 

 
<div style="height:1000px;background-color:red;font-size:36px"> 
 
Scroll Up and Down this page to see the parallax scrolling effect. 
 
This div is just here to enable scrolling. 
 
</div> 
 

 
</body> 
 
</html>

+0

ありがとうたくさんの! – Alex

+1

[よくある質問] ** [回答方法​​]の部分を読んでください – ZimSystem

+0

申し訳ありません@ZimSystem質問は不明瞭かもしれませんが、探しているだけです彼女のサイトを通して私は問題が何かを知ることができた。それはかなり一般的です。私はそれが答えを知っていて、それだけのためにそれをやっていないのは "クールではない"とかなり確信しています。そして、サイトがもはやオンラインでなくても、私の答えは彼女の質問を補完し、誰にとっても理解できるようにします。 –

0

:-)

おかげで(「ここにあなたのIMGのアドレスが行く」)のURLを、

+0

の複製であると思います私はすでに試した – Alex

+1

@ BlaShka14 - "[答えてください](http://stackoverflow.com/help/how-to-answer)"をお読みください – ZimSystem

関連する問題