【问题标题】: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 你想让&lt;span&gt; Submit &lt;/span&gt; 成为&lt;img src="btnSubmit.png"&gt; 的“on”吗?
  • 是的,图片上的文字
猜你喜欢
  • 2019-12-10
  • 2017-12-17
  • 2013-07-23
  • 1970-01-01
  • 2017-05-27
  • 1970-01-01
  • 2018-02-07
  • 2017-07-09
  • 2013-09-29
相关资源
最近更新 更多