CSS-Hintergrundbild, das scrollen kann

Ich versuche ein Hintergrundbild zu erstellen, das über eine Bildlaufleiste verfügt, um das Bild vertikal nach unten zu scrollen. Ich mag die Idee, Breite und Höhe Prozentsätze zu verwenden, weil es scheint, dass diese Methode das Bild immer an jede Bildschirmauflösung anpasst. Leider ist die Länge des Bildes ziemlich groß und daher wird der untere Teil des Bildes abgeschnitten. Ich habe verschiedene Möglichkeiten ausprobiert, um dies zum Laufen zu bringen, einschließlich der Änderung der Eigenschaften der Hintergrundgröße, der Verwendung von Überlauf-y: scroll und anderen Änderungen, die nicht erwähnenswert sind. Hier ist der Code, den ich so weit bin auf:CSS-Hintergrundbild, das scrollen kann

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; 
}

Quelle

2016-12-11 user6636427

Ist div derzeit die volle Höhe des Bildes? – Jack

UPDATE: ohne Höhe können Sie nicht das Bild von oben nach unten scrollen. aber Sie können nicht auf jeden Bildschirm passen.

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>

Quelle

2016-12-11 20:40:03

Die Bildlaufleiste scheint den Inhalt nicht zu scrollen. – user6636427

also möchten Sie das Bild scrollen? dann müssen Sie eine Mindesthöhe für die Bildklasse festlegen. Oder möchten Sie Parallax Scrolling-Effekt machen? –

Ich möchte das Bild scrollen, so dass wenn Sie bis zum oberen Rand des Bildes gescrollt sind, sehen Sie den oberen Rand des Bildes. Wenn Sie zum unteren Bildrand scrollen, sehen Sie den unteren Teil des Bildes. Ich schätze Ihre Hilfe! – user6636427

Eine Bildlaufleiste das Ansichtsfenster bewegt, so dass Sie sehen, was nicht auf die Bildschirm. Wenn Sie Ihr Bild so erweitern, dass das Bild & durch Angabe der relativen Höhe (% 100 Höhe & Breite des Bildschirms) erweitert, wird es nie eine vertikale Bildlaufleiste geben, "scroll-fähig", da nichts zu scrollen ist. Es 'überläuft' nie.

Um scrollfähige Bilder zu erhalten, müssen Sie ihr eine Breite zuweisen - oder in diesem Fall -, die größer ist als Ihr Ansichtsfenster.

Quelle

2016-12-11 20:29:06 Eorekan

Wenn Sie dem div eine bestimmte Breite und Höhe geben, können Sie blättern, aber wenn Sie die Seite auf einem Bildschirm mit einer anderen Auflösung anzeigen, ist die Breite des Bildes aus. Gibt es eine Möglichkeit, diese Eigenschaften festzulegen und das Bild "rescale" an die Auflösung eines anderen Bildschirms anpassen zu lassen? – user6636427

CSS-Hintergrundbild, das scrollen kann

Antwort

Verwandte Themen