スクロール可能なCSSの背景画像

画像を垂直方向にスクロールするスクロールバーを持つ背景画像を作成しようとしています。私は幅と高さのパーセンテージを使用するという考え方が好きです。なぜなら、このメソッドが常に画像をどの画面解像度にも適合させるように思えるからです。残念なことに、画像の長さはかなり大きいので、画像の下端は切り取られます。私はoverflow-y：scrollや他に言及する価値のない編集を使って、バックグラウンドサイズのプロパティを変更するなど、さまざまな方法を試しました。ここで私はこれまで働いているコードです：スクロール可能なCSSの背景画像

HTML

<!doctype html> 
<html> 

<head> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<meta charset="UTF-8"> 
</head> 

<body> 
<div class='image'></div> 
</body> 

</html>

CSSは、あなたが上ではないものを見ることができるようにスクロールバーがビューポートを動かす

@charset "UTF-8"; 
/* CSS Document */ 
body { 
    margin:0; 
} 
.image { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:black; 
    background-image:url(../pictures/testjpg); 
    background-size:cover; 
    overflow-y: scroll; 
}

出典

2016-12-11 user6636427

現在画像の完全な高さのdivですか？ – Jack

UPDATE：高さを指定しないと、画像を上から下にスクロールできません。しかし、あなたはこれをどの画面にも合わせることはできません。

body,html { 
 

 
    margin: 0; 
 
    
 
} 
 

 
.image { 
 
    background-image: url("http://www.w3schools.com/howto/img_parallax.jpg"); 
 
    background-position:center; 
 
    background-size: 100% 100%; 
 
    
 
    height:300vh; 
 
    
 
    }

<body> 
 

 
    <div class="image"> 
 

 
</div> 
 
</body>

出典

2016-12-11 20:40:03

スクロールバーが実際にコンテンツをスクロールしていないようです。 – user6636427

画像をスクロールしたいですか？イメージクラスの最小の高さを設定する必要があります。または視差スクロール効果を作りたいですか？ –

画像の上部までスクロールすると、画像の上部が見えるように、画像をスクロールしたいと思います。そして、画像の下にスクロールすると、画像の下が見えます。私はあなたの助けに感謝します！ – user6636427

画面。上のコードでは、相対的な高さ（％100高さ&のスクリーンの幅）を与えて画像を&に展開すると、スクロールするものがないので、「スクロール可能な」垂直スクロールバーは決してありません。決して「溢れる」ことはありません。

実際にスクロール可能な画像を表示するには、ビューポートよりも大きな幅（この場合は高さ）を指定する必要があります。

出典

2016-12-11 20:29:06 Eorekan

divに特定の幅と高さを指定するとスクロールが可能になりますが、異なる解像度の画面でページを表示すると、画像の幅はオフになります。これらのプロパティを設定し、別の画面の解像度に合わせてイメージを「サイズ変更」する方法はありますか？ – user6636427

スクロール可能なCSSの背景画像

答えて

関連する問題