在網(wǎng)頁設計中,有時會需要在背景上加上文字來實現(xiàn)更好的視覺效果,這時候就需要用到CSS的背景加文字技巧。
首先,我們需要設置背景圖像或顏色,可以通過以下代碼實現(xiàn):
body { background-image: url("bg.jpg"); /* 或者使用以下代碼設置背景顏色 */ /* background-color: #FDF7E8; */ }
接下來,我們需要添加文字,可以通過以下代碼實現(xiàn):
body::before { content: "這是背景上的文字"; color: white; font-size: 24px; text-align: center; /* 其他樣式 */ }
上述代碼中,我們使用偽元素::before來添加文字,content屬性用來添加文字內容。注意要設置color屬性為白色,以便讓文字能夠在背景上看清楚。同時,設置text-align屬性為center可以讓文字居中顯示。
需要注意的是,如果想要添加多行文字,可以使用\
標簽來換行,如下所示:
body::before { content: "這是第一行文字"; color: white; font-size: 24px; text-align: center; /* 其他樣式 */
content: "這是第二行文字"; }
通過上述代碼,我們就可以輕松地在背景上添加文字了。