使用 CSS 將圖片背景應用于網頁元素是一項常見的任務。在這個過程中，我們通常使用 p 標簽和 pre 標簽來分別定義文章和代碼的樣式。 p 標簽表示一個段落，它能夠自動在段落之間添加一定量的空隙，以使文章易于閱讀。要將圖片背景應用于一個段落中的文本，我們可以使用如下的 CSS 代碼： ```css p { background-image: url('image.jpg'); background-repeat: repeat; background-position: center; background-size: cover; color: white; font-size: 16px; line-height: 1.5; padding: 30px; } ``` 在這個代碼中，我們首先使用了 background-image 屬性將一個圖片作為背景進行應用。接下來，我們使用了 background-repeat 屬性來定義圖片在段落中重復的方式。在這個例子中，我們讓圖片重新平鋪以填充整個段落。 為了保證圖片在段落中居中，我們使用了 background-position 屬性定義了圖片的水平和垂直位置。在這個例子中，我們將圖片居中放置，水平和垂直方向上的位置都居中。 為了保證圖片在段落中的展示效果，我們使用了 background-size 屬性來限制圖片的顯示尺寸。我們設置 cover 選項以保證圖片完全覆蓋整個段落。 最后，我們為段落定義了其他一些樣式，例如字體顏色、大小、行高和 padding（內邊距），以使其更加易于閱讀。 pre 標簽則表示一段預格式文本，常常用于顯示代碼或其他需要直接顯示的內容。在這種情況下，我們可以使用類似的 CSS 代碼將圖片背景應用于 pre 標簽中的代碼塊： ```css pre { background-image: url('image.jpg'); background-repeat: repeat; background-position: center; background-size: cover; color: white; font-size: 16px; line-height: 1.5; padding: 30px; white-space: pre-wrap; } ``` 這個代碼和我們之前使用的 p 標簽的代碼類似，只不過這里我們多設置了一個 white-space 屬性，用于定義文本的換行方式。由于代碼中有大量的空格和換行符，我們需要使用 pre-wrap 選項保證這些空格和換行符能夠有效的被顯示出來。 通過使用這樣的技巧，我們可以很輕松地將圖片背景應用到網頁中的文章和代碼中，并且使其具有更好的閱讀體驗。