CSS中有一個(gè)常見的問題是：當(dāng)我們添加一張背景圖片到一個(gè)元素中時(shí)，它會影響到元素內(nèi)部的文本布局和內(nèi)容。這意味著我們必須小心處理以確保不會發(fā)生任何意外的布局變化。但是，我們可以通過使用 CSS3 中的一個(gè) disruptor 讓背景圖片不影響我們的文本布局。

.element{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
text-indent: -99999px;
}

這里的關(guān)鍵點(diǎn)是帶有負(fù)文本縮進(jìn)（text-indent）的 CSS 規(guī)則。不管你是在傳統(tǒng)的背景附加方法中還是在這個(gè)新的基于CSS3的方法中，該規(guī)則都是通用的。使用這個(gè)規(guī)則可以將文本縮進(jìn)到元素內(nèi)部，而背景圖片將自動適應(yīng)到元素的寬度和高度。這是一個(gè)非常實(shí)用的技巧，特別是在網(wǎng)頁設(shè)計(jì)中。嘗試使用這個(gè)技巧，讓您的網(wǎng)頁設(shè)計(jì)更加完美，符合您的期望。