0

我正在尝试使用 twitter-bootstrap 示例

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 -->

我怎样才能做到这一点？

谢谢。

4

4 回答 4

2

它只是使用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;
}
于 2013-04-06T20:30:01.577 回答
1

为什么不将图像替换为您自己的图像，而不是将其插入其中

代替-

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

这

<img class="img-circle" data-src="yourImage.jpg">
于 2013-04-06T20:32:42.590 回答
1

Holder.js：Holder 完全在客户端呈现图像占位符。

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

于 2013-07-13T06:26:14.243 回答
1

抱歉我来晚了，尝试将 data-src="" 更改为 src="" 然后将 img 链接/名称放在 " " 之间

于 2014-02-10T05:44:28.067 回答