HTML是一種標記語言，用于構建網頁。通過HTML代碼，我們可以實現在網頁上顯示各種不同的內容，包括文本、圖片、音頻和視頻等。在網頁設計中，滿屏圖片是一種比較常見的效果，這里介紹一下如何實現html滿屏圖片的代碼。
<html>
<head>
<title>滿屏圖片演示</title>
<style type="text/css">
body { margin: 0; padding: 0; }
.wrapper { position: relative; width: 100%; height: 100vh; }
.bg-image { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background-image: url('image.jpg'); background-size: cover; }
.content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
h1 { font-size: 4rem; color: #ffffff; }
</style>
</head>
<body>
<div class="wrapper">
<div class="bg-image"></div>
<div class="content">
<h1>這是一張滿屏圖片</h1>
</div>
</div>
</body>
</html>上述代碼中，我們使用了相對定位、絕對定位、百分比高度和CSS3 transform屬性來實現滿屏圖片效果。具體來說：
1. 首先，我們將頁面的margin和padding都設置為0，將body元素的高度和寬度都設置為100%。這樣可以盡可能將頁面占滿整個屏幕。
2. 接著，在body中放置一個class為wrapper的div元素，這個元素的寬度和高度都設置為100%。同時，這個元素的position屬性設置為relative，為后續的絕對定位元素做準備。
3. 在wrapper里面放置兩個元素：一個class為bg-image的div元素和一個class為content的div元素。bg-image的作用是作為背景圖片，并鋪滿整個wrapper元素。它的position屬性設置為absolute，以便從文檔流中脫離。同時，這個元素的z-index屬性設置為-1，以便讓內容div位于其上方。
4. content元素的position屬性也設置為absolute，以便實現靈活的絕對定位。同時，使用CSS3的transform屬性實現垂直居中和水平居中。最后，利用text-align屬性實現內部文字居中顯示。
5. 在內容div中放置需要展示的文字，比如標題等。這里用了h1元素，顏色值為FFFFFF，字體大小為4rem，較大，比較顯眼。
這樣，我們就實現了一張完整的滿屏圖片，并在其上方展示了一些內容。當然，具體的樣式可以根據實際需求進行修改，這里只提供一個基本的框架。
上一篇css 寬度為屏幕寬度
下一篇css 容器垂直居中顯示