CSS 是一種網頁樣式描述語言,它可以對網頁元素進行樣式設置,使得網頁看起來更加美觀和整潔。在 CSS 中,我們可以對圖片進行樣式設置,包括大小、邊框、位置等,那么,我們是否可以在圖片上加字呢?答案是肯定的。
img{ position: relative; } .img-text{ position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, .5); color: #fff; padding: 15px; box-sizing: border-box; } <div class="img-wrap"> <img src="example.jpg" alt="example"> <div class="img-text"> <p>這是一段文字描述</p> </div> </div>
上述代碼是一個簡單的在圖片上加文字的例子。首先,我們為圖片設置了相對定位,然后再用絕對定位的方式來顯示文字描述。其中,.img-wrap 是一個容器,用于包含圖片和文字展示層,.img-text 是用于展示文字的層,使用了絕對定位布局,同時,為了確保展示層的寬度和圖片寬度一致,設置了 width: 100%。此外,為了使得文字更加清晰和易讀,我們還為文字展示層設置了一個透明的背景顏色,使用了 rgba(0, 0, 0, .5) 手段,其中,最后一個 .5 表示透明度程度。最后,我們在 .img-text 中使用了 p 標簽來展示文字內容。
總之,CSS 可以為圖片加上文字,使得網頁看起來更加完整和美觀。在實際應用中,我們可以根據需求來設置不同的樣式和排版,以滿足用戶的需求。
上一篇vue獲取keycode
下一篇vue獲取js變量的類型