首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在Html和Css中使用图像作为按钮

在Html和Css中使用图像作为按钮
EN

Stack Overflow用户
提问于 2016-04-19 07:58:52
回答 2查看 4.6K关注 0票数 0

我一直在使用一个游戏资产集合来构建一个游戏。现在出现的主要问题是如何包含用户界面按钮。

目前,按钮是不同梯度和特定字体的集合。我尝试将图像渐变转换为背景属性,但没有做到,而且正在使用的字体是由图像表示的字符集合。

解决这个问题的最佳做法是什么?用图片作为按钮?什么是正确的语义标记?

按钮示例

按钮的语义

索尼克斯!对于这个问题的回答,但它不是关于如何去做,而是关于正确的语义标记。

目前,我已经解决了以下设置,这似乎是合理的。

代码语言:javascript
代码运行次数:0
运行
复制
<label>
    <img src="/aButton.png" alt="Send Message">
</label>
EN

回答 2

Stack Overflow用户

发布于 2016-04-19 08:05:21

尝试如下:

代码语言:javascript
代码运行次数:0
运行
复制
<input type="submit" id="search" name="submit" alt="search" value="">

CSS

代码语言:javascript
代码运行次数:0
运行
复制
input#search    {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}
input#search:hover    {
    background:url(../search-icon2.png);
    background-repeat: no-repeat;
    width:40px;
    height:40px;
    border: 0;
    }
票数 2
EN

Stack Overflow用户

发布于 2016-04-19 08:14:04

如果要使用输入,请尝试如下:

代码语言:javascript
代码运行次数:0
运行
复制
background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;
代码语言:javascript
代码运行次数:0
运行
复制
<button type="submit"><img></img></button>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36712094

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档