CSS3是一個功能強大的樣式語言，它為Web開發帶來了許多方便和便利。調整背景圖片就是其中之一。今天我將向你展示如何使用CSS3來輕松地調整背景圖。

/* HTML */
CSS3 Background Image
/* CSS */
.container {
background-image: url('image.jpg'); /* 設置背景圖 */
background-size: cover; /* 自動縮放以填充背景 */
background-position: center; /* 將圖像定位在屏幕中央 */
height: 100vh; /* 將容器高度設置為屏幕的高度 */
display: flex; /* 使用Flexbox布局,使標題垂直居中 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container h1 {
color: white;
font-size: 4rem;
text-shadow: 2px 2px 4px #111; /* 添加文本陰影提高可讀性 */
}

如你所見，我們可以使用background-image屬性來設置背景圖像的路徑。我們可以使用background-size屬性調整圖像大小以適應容器大小。在這個例子中，我們使用cover參數以保持圖像比例不變，并縮放它以填充整個容器。

background-position屬性用于定義圖像在容器中的位置。在這個例子中，我們將圖像置于容器的中心。

最后，我們使用Flexbox布局將標題垂直和水平居中。我們添加了一些華麗的文本陰影效果，以使標題更易于閱讀。

現在你可以掌握如何調整背景圖片了。使用這些技術，您可以輕松地將背景圖像優化為任何設備上的任何屏幕。