将图像嵌入<button>元素中
Ami*_*gin 115 html css image button
我正在尝试<button>在HTML中的元素上显示png图像.该按钮与图像大小相同,显示图像但由于某种原因不在中心 - 因此无法全部看到.换句话说,似乎图像的右上角位于按钮的中心,而不是按钮的右上角.
这是HTML代码:
<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>
更新:
我认为实际发生的是保证金问题.我得到一个两个像素的边距,所以背景图像是从按钮出来的.该按钮和图像的大小相同,这是唯一的20px,所以这是非常noticable ......我试过margin:0,padding:0但它并没有帮助...
And*_*ber 159
您可以使用输入类型图像.
<input type="image" src="http://example.com/path/to/image.png" />
它作为一个按钮工作,可以附加事件处理程序.
或者,您可以使用css为背景图像设置样式,并适当设置边框,边距等.
<button style="background: url(myimage.png)" ... />
- -1:"*should*"是一个过于强大的术语,因为这不是`<input type ="image">`的设计目的.你为什么不建议CSS？ (4认同)
- 不要忘记按钮元素需要两个起始结束标记,因此技术上<button />无效,它应该是<button> </ button>. (3认同)
- 如果您使用 CSS 方法，一个问题是您可能还想指定“background-size: cover”以使图像覆盖按钮。我挠头想知道为什么我的图像没有显示，直到我意识到只有它的透明左上角实际上在按钮内...... (3认同)
- ...并且不需要 JavaScript 来提交表单。 (2认同)
Thi*_*iff 63
如果图像是一段语义数据(例如,个人资料图片),则使用<img>您内部的元素<button>并使用CSS来调整大小<img>.如果图像只是让按钮在视觉上令人愉悦的一种方式,请使用CSS background-image来设置样式<button>(并且不要使用<img>).
演示:http://jsfiddle.net/ThinkingStiff/V5Xqr/
HTML:
<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>
CSS:
button {
display: inline-block;
height: 134px;
padding: 0;
margin: 0;
vertical-align: top;
width: 104px;
}
#close-image img {
display: block;
height: 130px;
width: 100px;
}
#close-CSS {
background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
background-size: 100px 130px;
height: 134px;
width: 104px;
}
输出:
试试这个
<input type="button" style="background-image:url('your_url')"/>
小智 7
将图像放入按钮的最简单方法：
<button onclick="myFunction()"><img src="your image name here.png"></button>
这将自动将按钮的大小调整为图像的大小。