CSS是網頁設計中必不可少的一部分，通過CSS可以使網頁呈現出豐富多彩的效果。其中，文字加背景圖便是其中的一個常見技巧，下面我們來介紹一下如何實現。

.text-with-bg {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
padding: 10px 20px;
color: #fff;
font-size: 18px;
}

上述代碼中，我們通過定義一個名為.text-with-bg的CSS類來實現文字加背景圖的效果。

其中，background-image屬性定義了背景圖的位置，例如：url("bg.jpg")，表示將圖片名為bg.jpg的背景圖放在文字的后面。background-repeat: no-repeat;表示不重復渲染背景圖，background-size: cover;表示讓圖片充滿整個背景。

此外，我們還使用了display: inline-block;讓文字和背景圖都處于同一行內，padding: 10px 20px;表示調整文字到背景圖的距離以及背景圖的大小。color: #fff;設置文字顏色為白色，font-size: 18px使文字大小為18像素。

通過以上代碼定義的CSS類，我們可以將其添加到HTML中的文字所在的標簽上，例如：

<p class="text-with-bg">Hello, world!</p>

這樣，就可以在網頁中看到加了背景圖的文字效果了。