在 HTML 中,我們可以使用<img>
標簽來添加圖片,同時還可以在圖片上添加按鈕,讓頁面具有更好的交互性。
要設置圖片上的按鈕,可以使用以下代碼:
<div style="position:relative; display:inline-block;"> <img src="example.jpg" width="300" height="200" alt="示例圖片"> <button style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">點擊</button> </div>
上面的代碼中,我們使用了<div>
塊級元素來包含圖片和按鈕,并設置了其樣式為相對定位和內聯塊。
然后,我們在<img>
標簽中插入圖片,并使用width
和height
屬性來指定圖片的寬高比例,同時在alt
屬性中添加了一個簡短的文字描述。
接著,在<button>
標簽中添加了一個按鈕,使用絕對定位和top
、left
、transform
屬性來將按鈕居中放置在圖片上。
通過以上的代碼設置,圖片上的按鈕就可以成功地添加到頁面中了。