Question

我有两种创建圆形按钮的方法：http://codepen.io/anon/pen/GiHyJ 它们看起来都是平等的，但我不确定哪种方式更稳定，跨平台，可用等等。我只有一部Android手机可以测试，而且看起来都不错。我应该使用一种方法而不是另一种方法吗？

方法一：<img>内的<div>，允许用户在img上获取上下文菜单。

<div class="method1">
  <img src="http://i.imgur.com/TLFDrvp.jpg" />
</div>

.method1 {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}

方法二：background: url上的<div>。减少标记。

<div class="method2"></div>

.method2 {
    background: url(http://i.imgur.com/TLFDrvp.jpg);
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}

Answer 1

将图像用于内容，将background-image用于设计元素。在您的情况下，按钮是您设计的一部分，应该使用background-image。

这是创建圆形按钮的更好方法：<img/>还是背景图像？

1 个答案: