这是我试图实现的目标:
我尝试将文字放在背景图片上方或将背景图片放在文字下方,并让图片和文字可以点击,因为它是Python 3.4.3 (v3.4.3:9b73f1c3e601, Feb 24 2015, 22:44:40) [MSC v.1600 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import sys
>>> sys.stdin.encoding
'utf-8'
>>> s = 'ф'
。
但我无法将文字放在button
的顶部。 button
似乎没有任何影响。
是否可以使用单个按钮元素进行操作?
vertical-align

button {
width: 96px;
height: 150px;
border: none;
border-radius: 0px;
line-height: 100px;
background-position: 50% 58px;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
margin: 20px;
}
button.document {
border: 1px solid red;
}

答案 0 :(得分:2)
删除line-height
并添加padding-bottom
以偏移文字:
button {
width: 96px;
height: 150px;
border: none;
border-radius: 0px;
background-position: 50% 58px;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
margin: 20px;
padding-bottom: 125px;
}
button.document {
border: 1px solid red;
}
<button class="document"
style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)">
Plot Plan.doc
</button>
答案 1 :(得分:2)
我的是James Montagne的修改。我删除了高度(应该是内容的一个因子+(填充/图像)并将按钮定位在元素的底部。
这在CSS中的工作方式首先是输出所有文本,提供大约40px(Y)的内容。然后,它在下面添加了96px的填充 - 足够的额外空间来包含背景图像。最后,它使用background-position来决定放置背景图像的位置;在底部。这减少了每个&#34;位置变量&#34;的耦合,这可能使其更容易更改。
button {
width: 96px;
border: none;
border-radius: 0px;
background-position: 50% bottom;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
margin: 20px;
padding-bottom: 96px;
}
button.document {
border: 1px solid red;
}
&#13;
<button class="document"
style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)">
Plot Plan.doc
</button>
&#13;
答案 2 :(得分:0)
我能得到的最好的:
button {
width: 96px;
height: 150px;
border: none;
border-radius: 0px;
background-position: 10% 140%;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
margin: 20px;
}
button.document {
border: 1px solid red;
}
<button class="document"
style="background-image: url(http://icons.iconarchive.com/icons/iynque/flat-ios7-style-documents/96/doc-icon.png)">
Plot Plan.doc
</button>
添加了一些背景定位background-position: 10% 140%;
- 水平为10%,垂直定位为140%。