哪个是创建圆形按钮的更好方法：<img> 或 background-image？ [复制]

Posted 2023-03-05

【中文标题】哪个是创建圆形按钮的更好方法：<img> 或 background-image？ [复制]

【英文标题】：Which is a better way to create circular buttons: <img>, or background-image? [duplicate]

【发布时间】：2013-03-18 01:13:59

【问题描述】：

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

方法一：<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);

【问题讨论】：

我更喜欢后台版本。在我看来，图像应该只用于显示图像。如果您只需要它用于布局/设计，请不要使用图像。正如我所说：这里没有真实的事实，只是我的看法。

@LinusCaldwell：相反，有人可能会争辩说background-image 应该只用于背景。不要使用背景来提供前景内容。

如果您为按钮使用背景图像，为链接使用普通文本，则生成的页面更易于通过技术辅助浏览（例如盲人）阅读。此外，通过使用 CSS 对其进行样式设置，将按钮和按钮上的文本分开，您可以更轻松地进行未来的外观更新。

【参考方案1】：

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