正文 

当前位置： 首页 > 问答 >

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

     2023-03-05     177

关键词：

【中文标题】哪个是创建圆形按钮的更好方法：<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 它们看起来都一样，但我不确定哪种方式更稳定、跨平台、可用等。我只有一部安卓手机可以测试，而且看起来都不错。我应该使用一种方法而不是另一种方法吗？为什么？

方法一：&lt;img&gt;在&lt;div&gt;中，允许用户在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 上&lt;div&gt;。更少的标记。

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

【讨论】：

哪个是指定 HTML 固定列宽（宽度或样式属性）的更好方法

】哪个是指定HTML固定列宽（宽度或样式属性）的更好方法【英文标题】：WhichisthebetterwayofspecifyingHTMLFixedColumnwidth(widthorstyleattribute)【发布时间】：2010-12-0404:18:23【问题描述】：我想问一下指定HTML列宽的更好方法是什么？宽度属... 查看详情

使用自定义 drawRect: 方法创建圆形 UIButton

】使用自定义drawRect:方法创建圆形UIButton【英文标题】：CreateroundUIButtonwithcustomdrawRect:method【发布时间】：2017-03-1515:41:32【问题描述】：我的目标是创建一个自定义的UIButton子类，它创建一个带有一些附加功能的圆形（或圆形矩形... 查看详情

Android中的圆形环形按钮

...inAndroid【发布时间】：2012-02-2803:09:03【问题描述】：我想创建一个与下图一模一样的按钮背景（或按钮本身）。我目前正在使用图像进行操作。我尝试使用以下XML创建一个类似的，但它看起来不像预期的那样。<?xmlversion="1.0"enc... 查看详情

哪个是基于数据库值在c＃突出显示列表框中将字符串传递给list的更好方法(代码片段)

如果有人能告诉我什么是定义list并将字符串传递给它的更好方法，我将不胜感激从性能的角度来看，我不确定使用哪一个或哪一个更好varselection="28,2,10,30,100,51";List<string>categories=selection.Split(',').ToList();List<string>categories=n... 查看详情

js实现点击一个按钮更换图片

参考技术A你的代码差在少了"选择元素"这一步。img1.src="..\\images/DT2.JPG"这一步是没有作用的，因为img1你还没有定义。正确的方法是让图片元素的id是img1，然后document.getElementById('img1').src="..\\images/DT2.JPG"... 查看详情

如何把jquery的值放入img标签的src里面

..."src",some_url);实例演示——点击按钮后更改图片1、创建Html元素<div class="box"> <p><span>实例演示：点击按钮切换图片</span></p><br><p></p> <div class="content"> <img ... 查看详情

为html创建按钮的正确方法[重复]

】为html创建按钮的正确方法[重复]【英文标题】：correctwaytocreateabuttonforhtml[duplicate]【发布时间】：2017-10-0802:37:33【问题描述】：为什么有不同的方法来创建按钮，以及何时使用哪一种。<form><inputtype="button"><buttontype="bu... 查看详情

哪个更好？数组、ArrayList 或 List<T>（在性能和速度方面）

】哪个更好？数组、ArrayList或List<T>（在性能和速度方面）【英文标题】：Whichisbetter?array,ArrayListorList<T>(intermsofperformanceandspeed)【发布时间】：2012-06-0415:29:49【问题描述】：我需要快速处理我的页面。要添加的值的计数将... 查看详情

img 或 css 宽度的内联宽度？

...发布时间】：2012-01-0401:30:31【问题描述】：我想知道以下哪个更好用，或者一般来说更好：<imgsrc="foo.png"height=32width=32/>或<imgsrc="foo.png"style="height:32px;width:32px;"/>【问题讨论】：【参考方案1】：后者 查看详情

悬停时如何更改大量img

...在悬停时更改它们。我找到了两个解决方案，但我不知道哪个更好。HTML中的第一个：<td><ahref="getContent(\'unlight\');"><imgsrc=" 查看详情

RecyclerView 与以编程方式创建的视图：哪个更好？

】RecyclerView与以编程方式创建的视图：哪个更好？【英文标题】：RecyclerViewvsProgrammaticallyCreatedViews:Whichoneisbetter?【发布时间】：2019-06-0407:50:14【问题描述】：我想列出我从firebase数据库中提取的项目。我为此使用了RecyclerView，但... 查看详情

就浏览器兼容性而言，哪个是更好的 ifra 或 <video> 来播放视频（youtube 和非 youtube）？

】就浏览器兼容性而言，哪个是更好的ifra或<video>来播放视频（youtube和非youtube）？【英文标题】：Whichisbetteriframor<video>toplayvideo(bothyoutubeaswellnonyoutube)intermsofbrowsercompatibility?【发布时间】：2015-09-1016:14:14【问题描述】：... 查看详情

哪个是编写用于插入数据的 PHP 代码的更好方法

】哪个是编写用于插入数据的PHP代码的更好方法【英文标题】：WhichisbetterwayforwritePHPcodeforinsertdata【发布时间】：2020-09-2018:57:45【问题描述】：我有些困惑，因为有些人编写这样的PHP代码来上传数据。但我的导师总是使用$query和$... 查看详情

谁能提供一段按钮切换窗口的纯css代码？

...，就像网易首页那样（如图），鼠标停留（或点击）那个按钮，就出来那个按钮所对应的内容。一定要纯CSS的，全部代码连在一起的，不要JS的。<head><title>无标题页</title><scripttype="text/javascript">functionimgc... 查看详情

div中怎么把a标签放在右上角

...能使用jquery中的方法。3、在test.html文件内，使用div标签创建一个模块，在div内，使用img标签创建两张图片。4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“添加a标签”。5、在test.html文件中，给button按钮绑定oncli... 查看详情

哪个是遍历 DOM 元素的更快方法？

】哪个是遍历DOM元素的更快方法？【英文标题】：WhichisthefasterwaytotraverseaDOMelement?【发布时间】：2014-02-2505:57:29【问题描述】：假设我有这样的标记：<divid="comment_box"><divclass=\'comment\'><ul><liclass=\'comment_1\'></li&g... 查看详情

svg如何做圆形图片

SVG如何做圆形图片2016年5月31日17:30:48提到圆形图片，大家首先想到的一定是border-radius，但在SVG中这些方法很难起效，下面方法适合SVG中制作任意规则与不规则的图形。原图：效果：方法一（SVG原生方法）：<svgwidth="304"height="223... 查看详情

HTML <img> 还是 CSS 背景图像？选择哪个？ [复制]

】HTML<img>还是CSS背景图像？选择哪个？[复制]【英文标题】：HTML<img>orCSSbackground-image?Whichtochoose?[duplicate]【发布时间】：2014-05-1114:48:53【问题描述】：我应该使用&lt;img&gt;标签还是应该使用带有cssbackground-image的div？... 查看详情