如何设置按钮背景图像的高度和宽度？ [关闭]答案

【问题标题】：How can i set height and width of background image of button? [closed]如何设置按钮背景图像的高度和宽度？ [关闭]
【发布时间】：2020-12-17 16:41:22
【问题描述】：

我只想正确设置此处提到的图片按钮背景图像的高度和宽度！

float:right;
width: 40px;
height: 40px;
border-radius: 50%;

【问题讨论】：

请向我们展示添加背景的 CSS 代码，以及按钮的 HTML 会有所帮助，以便我们向您展示它的工作：)
网站上已经有lots of similar questions 对此有答案：Background image full width and height 或Fit background image to div。请在发帖前先检查网站，看看是否有答案（或很多答案！）在发帖前已经存在...见How to Ask

标签： html css

【解决方案1】：

您缺少 background-size 属性：

background-size: contain;

button {
  float:right;
  background: url('https://i.stack.imgur.com/gdaRR.png');
  background-size: contain;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

&lt;button&gt;&lt;/button&gt;

【讨论】：

是的，谢谢你
请使用答案编辑器中的[<>] 按钮将代码答案添加为堆栈片段 - 无需访问外部站点。或者更好的是，根据 SO 指南，将之前已提出并有很多现有答案的问题标记为 duplicate 而不是回答，而不是向网站添加更多“混乱”:) 见@ 987654321@

【解决方案2】：

您应该使用background-image 和background-size: 100%。

button{
  background-image: url("https://i.stack.imgur.com/gdaRR.png");
  float :right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: 100%;
  border: none;
}

&lt;button&gt;&lt;/button&gt;

【讨论】：

欢迎您的贡献，但请注意，回答此类重复问题违反 Stack Overflow 准则。否则，我们只会鼓励更多糟糕的问题 :) 请参阅How do I write a good answer? 中的“回答好问题”部分，而正确的做法是标记问题并链接到现有答案之一。或者干脆直接回答问得很好的问题:)