我有一個引導colum:
<div class="col-md-4 col-xs-12"> <img src="sample.jpg" style="height:100vh;width:100%;" /></div>
和樣本圖片:
我的問題是:有沒有反正我可以在圖像上定義這兩個方塊作為一個對象?我面臨的問題是,我有一些圖片有一些元素,需要被定義為一個對象...我試圖找出什么是好的方法,如果它是可能的話?有沒有任何軟件,這可以幫助你這個?一些圖像到html生成器或somethin?永恒的榮耀給可以呈現(xiàn)我解決方案的人!我很感謝您的回復。
也許你想要做的是一個影像地圖?
或者,也許,你想在圖像上放置其他元素(見下面的例子)?
或者,你應該使用背景圖片?
也許你的用例可以不簡單化,我們很能為您的確切需要更好的解決方案。
您需要了解不同的用戶和環(huán)境,尤其是如果您打算使用此構思進行導航。
.rectangles { border: solid red 1px; position: relative; } .rectangles img { outline: dashed blue 1px; width: 100%; } .rectangle { position: absolute; outline: dashed red 1px; color: #fff; text-align: center; } .rectangle:hover { background: red; } .rectangle.first { left: 24.2%; top: 14.4%; width: 30.9%; height: 20.2%; } .rectangle.second { left: 24.9%; top: 52.7%; width: 29.9%; height: 22.1%; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="col-md-4 col-xs-12 rectangles"> <img src="https://i.stack.imgur.com/0ClBU.jpg" alt="Image with rectangles"> <a class="rectangle first" href="#">First rectangle</a> <div class="rectangle second">Second rectangle</div> </div> </div>