CSS實現文字包裹圖片可以使文字圍繞在圖片周圍,使頁面排版更加美觀。下面是示例代碼:
<div class="imgWrap"> <img src="example.jpg" alt="example image"> <p>這里是要包裹在圖片周圍的文字內容。</p> </div>
首先,我們需要給包裹圖片和文字的div添加樣式:
.imgWrap { display: inline-block; position: relative; } .imgWrap img { display: block; max-width: 100%; height: auto; }
以上代碼將使圖片保持原有比例縮放,并將包裹圖片和文字的div設置為inline-block展示方式和相對定位。
接下來,添加文字樣式:
.imgWrap p { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px; color: #fff; background-color: rgba(0,0,0,0.5); }
以上代碼將使文字絕對定位到div左上角,設置四周的padding值和半透明的背景顏色。
這樣,文字就會自動包裹在圖片周圍了。
上一篇php redis監聽
下一篇css實現掃描雷達效果