CSS中可以通過(guò)background-image屬性將一張圖片設(shè)置為背景圖，但是它不同于HTML中的img標(biāo)簽，不能直接在圖片上添加文字。

要在圖片上添加文字，可以通過(guò)以下兩種方式實(shí)現(xiàn)：

/* 第一種方式：使用偽元素 */
.background {
background-image: url('img.jpg');
position: relative;
}
.background::after {
content: '這是圖片上的文字';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.7);
text-align: center;
padding: 10px;
}
/* 第二種方式：使用CSS3濾鏡 */
.background {
background-image: url('img.jpg');
color: white;
text-align: center;
font-size: 24px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-blur: 10px;
backdrop-filter: blur(10px);
}

第一種方式是利用偽元素在圖片上添加一個(gè)透明的背景，在其中寫入文字。需要注意的是，偽元素的位置可以通過(guò)設(shè)置相對(duì)定位的父元素來(lái)確定。

第二種方式則是使用CSS3的濾鏡效果，通過(guò)將背景應(yīng)用于文字上并對(duì)其進(jìn)行模糊，然后使用背景濾鏡來(lái)顯示圖片。需要注意的是，這種方式只在支持CSS3的瀏覽器上才能使用。