blocks|key|4539775|text|Yes...use，background-position，但是这取决于你要去的样子，for...which，如果没有实际的图像，我们是无法分辨的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4539776|快速演示..。|4539777|​|4539778|++.upperLeftButton+{
++++display:+inline-block;
++++background-image:+url(http://lorempixel.com/output/abstract-q-c-25-25-7.jpg);
++++background-repeat:+no-repeat;
++++background-position:+center+left+25px;
++++height:+50px;
++++width:+200px;
++}|code-block|syntax|javascript|4539779|<button+class="upperLeftButton">Check</button>|4539780|4539781|entityMap^0|A|J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Y|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>Yes...use <code>background-position</code> but that will depend on the look you are going for...which we can't tell without the actual image.</p>

<p>Quick demo...</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>  .upperLeftButton {
    display: inline-block;
    background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-7.jpg);
    background-repeat: no-repeat;
    background-position: center left 25px;
    height: 50px;
    width: 200px;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="upperLeftButton"&gt;Check&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4539814|text|在img中添加button标记|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4539815|因为+element+can+contain+inner+HTML+content，您可以使用img标记作为在CSS中设置background-image的替代方法。|4539816|​|4539817|img+{
++margin-right:+5px;
++vertical-align:+middle;
}
button+{
++padding:+5px;
}|code-block|syntax|javascript|4539818|<button+type="button">
++<img+src="http://placehold.it/30"+alt="Place+Holder"+/>
++My+cool+button
</button>|4539819|4539820|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Notes^0|1|3|7|6|0|1B|3|1P|G|2|13|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|H|3|I|5|6|7|1C|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1F|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<h2>Add an <code>img</code> tag inside the <code>button</code></h2>

<p>Because <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Notes" rel="nofollow">the <code>button</code> element can contain inner HTML content</a>, you may use an <code>img</code> tag as an alternative to setting a <code>background-image</code> in CSS.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>img {
  margin-right: 5px;
  vertical-align: middle;
}
button {
  padding: 5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button"&gt;
  &lt;img src="http://placehold.it/30" alt="Place Holder" /&gt;
  My cool button
&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4207602|text|将padding-left:+30px+(或checkmark.png的任何宽度)和background:+url(images/checkmark.png)+top+left+no-repeat添加到CSS按钮中，这样就可以抵消文本的影响，但将图标留在左角。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4207603|编辑:此外，你必须要添加填充-顶部:10+is+(大约)以及，所以文本是垂直居中到图标以及。|4207604|entityMap^0|1|I|16|1K|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>Add <code>padding-left: 30px</code> (or whatever width of checkmark.png is) and <code>background: url(images/checkmark.png) top left no-repeat</code>  to button CSS, so it will offset the text, but leave icon in left corner.</p>

<p>EDIT: also, must likely you should add padding-top: 10px (or so) as well, so text is centered vertically in middle to icon as well.</p>


blocks|key|38312|text|另一个想法是重新设计(即使是简单的油漆)背景，为文本添加“空白”空间，并将其与css放在一起。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|38313|.button{
background-image:+url('http://community.avid.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.PostAttachments/00.00.53.19.51/WhiteBlack10801440x1080.png');
background-size:+cover;
width:+200px;
height:+50px;
text-align:+left;
padding-left:+32px;}|code-block|syntax|javascript|38314|就像这里的小提琴：|38315|https://jsfiddle.net/pp719t5n/|offset|length|38316|黑色是您的图像和空白背景为您的文本。|38317|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Y|8|@]|9|@$K|Z|L|10|1|11]]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|J]]]]

<p>Another idea is to redesign (even with simple paint) background and add 'blank' space for text and place it there with css. </p>

<pre><code>.button{
background-image: url('http://community.avid.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.PostAttachments/00.00.53.19.51/WhiteBlack10801440x1080.png');
background-size: cover;
width: 200px;
height: 50px;
text-align: left;
padding-left: 32px;}
</code></pre>

<p>Like in fiddle here:</p>

<p><a href="https://jsfiddle.net/pp719t5n/" rel="nofollow">https://jsfiddle.net/pp719t5n/</a></p>

<p>Black space is your image and white space background for your text.</p>


<p>I have a button that contains text and an image illustrating a click event.  I understand it is feasible to display an image as a background on the button.</p>

<p>CSS:</p>

<pre><code>    .upperLeftButton {
        display: inline-block;
        background-image:url(Images/checkmark.png);
        height:50px;
        width:200px;
    }
</code></pre>

<p>HTML:</p>

<pre><code>&lt;asp:Button ID="checkInButton" runat="server" Text="Check In"  OnClick="checkInButton_Click"/&gt;
</code></pre>

<p>Is there any way to display the image and text side by side within the button?</p>


Button image inline with text

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有一个按钮，其中包含文字和图片，说明一个点击事件。我知道在按钮上显示图像作为背景是可行的。CSS：    .upperLeftButton {        display: inline-block;        background-image:url(Images/checkmark.png);        height:50px;        width:200px;    }HT

问与文本内联的按钮图像
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与文本内联的按钮图像EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与文本内联的按钮图像
EN