图像中心和响应式文本答案

【问题标题】：text on image center and responsive图像中心和响应式文本
【发布时间】：2016-01-12 10:49:53
【问题描述】：

我想使用 html 和 css 制作这样的文本。并且能够在 IE8 上响应式网页和视图

enter code here

<a class="btnSubmit">
<img src="btnSubmit.png">
<span>Submit</span>
</a>

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
你可以使用渐变色作为它的简单背景。colorzilla.com/gradient-editor

标签： html css image responsive-design

【解决方案1】：

根据 G.L.P 的评论建议，您可以使用 CSS gradients 让后台正常工作。

对于“响应式网络”按钮，您可以考虑将宽度设置为 % 值，这会相对于网页进行缩放。

Here's 很好地解释了使用什么以及何时使用它

试试这样的：

HTML：

 <button>Submit</button>

CSS：

button {
    width:30%;
    background: -webkit-linear-gradient(grey, white); /* For Safari 5.1 to 6.0 */
    background: -moz-linear-gradient(grey, white);/* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(grey, white);/* For Firefox 3.6 to 15 */ 
    background: linear-gradient(grey, white); /* Standard syntax */
}

查看fiddle 以查看此代码的运行情况

【讨论】：

如果我想使用这些代码：提交
@luckyViva 你想让<span> Submit </span> 成为<img src="btnSubmit.png"> 的“on”吗？
是的，图片上的文字