在Twitter的引導

Question

指定圖像我試圖與Twitter的引導例如

http://twitter.github.io/bootstrap/examples/carousel.html

嘗試如果你去的頁面，你會看到有三個空心圈與140X140寫在上面。

我想在那個圈子裏的圖像..

以下是相關的代碼

<div class="span4"> 
       <img class="img-circle" data-src="holder.js/140x140"> 
       <h2>foobar</h2> 
       <p>Elaborate</p> 
       <p><a class="btn" href="#">View details &raquo;</a></p> 
      </div><!-- /.span4 --> 

我怎樣才能做到這一點？

謝謝。

Answer 1

它只是使用border-radius風格。該圖像實際上是一個方形圖像，但border-radius樣式修剪角落使其成爲一個圓圈。

.img-circle { 
-webkit-border-radius: 500px; 
-moz-border-radius: 500px; 
border-radius: 500px; 
} 

我建議你不要加載圖像來做到這一點。你可以做同樣的事情，像這樣一個div：

HTML

<div class="img-circle"></div> 

CSS

.img-circle { 
background:#555; 
width: 140px; 
height: 140px; 
-webkit-border-radius: 500px; 
-moz-border-radius: 500px; 
border-radius: 500px; 
} 

Answer 2

爲什麼不能用自己的一個替換圖像，而不是插入一個到它

而不是 -

<img class="img-circle" data-src="holder.js/140x140"> 

個

此

<img class="img-circle" data-src="yourImage.jpg"> 

Answer 3

Holder.js： 持有人呈現完全在客戶端圖像佔位符。

http://imsky.github.io/holder/

Answer 4

對不起，我有點晚了，請嘗試更改數據的src =「」到 SRC =「」然後把IMG鏈接/名稱中的「」的