CSS是網頁設計中必不可少的語言,不僅可以改變網站的樣式,還可以讓圖片上展現文字。具體實現方法如下:
/* HTML部分 */ <div class="image-container"> <img src="example.jpg"> <div class="text">這里是圖片上的文字</div> </div> /* CSS部分 */ .image-container { position: relative; display: inline-block; /* 將容器變成塊級元素,方便設置寬高 */ width: 200px; height: 200px; } .text { position: absolute; /* 文字絕對定位 */ top: 50%; /* 距離容器頂部50% */ left: 50%; /* 距離容器左側50% */ transform: translate(-50%, -50%); /* 將文字水平垂直居中 */ font-size: 16px; color: #fff; text-align: center; }
通過設置圖片容器為相對定位,然后將文本以絕對定位的方式進行放置,最后使用transform來調整文本的位置,就可以實現在圖片上展示文字的效果了。
上一篇css 圖片上加div
下一篇html暢銷書排行榜代碼