在 CSS 中,我們可以對一個元素使用背景圖片進行裝飾,但是有時候我們需要在圖片上加一些文字來表現畫面的意境或者設計稿的要求。在這種情況下,CSS 給我們提供了一個很好的解決方法,可以讓我們在圖片里面寫字。
示例代碼:這是背景圖片
這是一段在背景圖片上的字
在這個示例中,我們首先設置了一個 div 容器,寬度和高度都是 100%,并且居中顯示。接著在 div 里面新增了一個帶有背景圖片的內層 div,同時設置了它的寬度、高度和居中樣式。通過設置 padding 和文字顏色,我們可以在這個 div 上面輕松的添加文字,并且通過添加偽元素 :before 來實現深色半透明的遮罩效果,讓文字更加清晰醒目。
當然,如果你想在一張圖片里面添加不止一句話,那么你可以通過將我們剛剛的例子改為使用絕對定位來實現。只需要將 .bg-image 的 position 屬性設置為 relative,然后將 h2 和 p 的 position 屬性設置為 absolute,并且給他們分別指定一個合適的 top 值,這樣就可以實現多句話在圖片上面排列的效果了。
上一篇css中的兼容性問題
下一篇mysql更新時修改時間