在網頁設計中，圖片和文字的關聯是非常重要的。通過巧妙地運用CSS，我們可以讓圖片和文字在視覺效果上更加協調一致。

/*讓圖片環繞文字*/
img {
float: left;
margin-right: 20px; /*設置圖片距離文字的間距*/
}
/*讓文字環繞圖片*/
img {
float: right;
margin-left: 20px; /*設置圖片距離文字的間距*/
}

上述代碼分別是實現讓圖片環繞文字和文字環繞圖片的代碼?？梢钥吹?，只需在CSS中使用float屬性，并設置圖片和文字的間距即可。

除了讓圖片和文字環繞展示，我們還可以將圖片作為文字的背景。這樣可以讓文字更加生動有趣。

/*使用圖片作為文字背景*/
h1 {
background-image: url("path/to/image.jpg");
background-clip: text; /*只在文字區域顯示圖片*/
-webkit-background-clip: text; /*兼容性設置*/
color: transparent; /*文字顏色設置為透明*/
}

上述代碼使用background-image屬性將圖片作為文字的背景，使用background-clip屬性只在文字區域顯示圖片，并將文字顏色設置為透明。

在設計網頁時，圖片和文字的關聯是不容忽視的。巧妙地運用CSS，可以讓圖片和文字更好地協作，營造出更好的視覺效果。