Heim > Artikel > Web-Frontend > HTML implementiert ein Hintergrundbild wie Baidus Homepage-Effekt (Code)
HTML implementiert ein Hintergrundbild wie Baidus Homepage-Effekt (Code)
- 不言nach vorne
- 2018-10-24 16:54:032642Durchsuche
Beim Inhalt dieses Artikels geht es darum, das Hintergrundbild (Code) in HTML zu realisieren, das wie die Homepage von Baidu aussieht. Ich hoffe, dass es für Sie hilfreich ist.
Ich habe erfahren, dass ich diese Frage schon einmal auf Baidu gestellt habe, und sie wurde später gelöst. Aber viele Leute kamen zu mir und fragten mich, wie man das Problem und den Quellcode löst.
Es ist eigentlich ganz einfach. Ich werde den Code hier posten. Freunde, die es brauchen, müssen mich nicht auf QQ hinzufügen, sondern kommen einfach hierher, um es abzuholen.
Die Bilder darin wurden zufällig von mir gefunden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-image: url(http://pic1.win4000.com/wallpaper/b/589d687069ed9.jpg);
}
h1{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
color:#fff;
background-color: rgba(0,0,0,0.5);
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>按住Ctrl+滚动滚轮：可以看到文字缩放，背景不动</h1>
</body>
</html>
Das obige ist der detaillierte Inhalt vonHTML implementiert ein Hintergrundbild wie Baidus Homepage-Effekt (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!