如何使按钮值不可见并向按钮添加图像答案

【问题标题】：How to make a button value invisible and add an image to the button如何使按钮值不可见并向按钮添加图像
【发布时间】：2013-11-08 05:31:47
【问题描述】：

如何将图像分配给按钮并使其值消失，以便仅图像出现在屏幕上。我正在使用 PHP 和 HTML5。

以下代码有效，图像出现，但按钮的值也显示在屏幕上。我无法删除 value 属性，因为我需要它来查找所显示项目的 ID。

PHP 代码（将 td 插入动态表）

<?php $url = get_template_directory_uri().'/images/deleteButton1.png'; ?>
<td class='delete'><button id="gm_btn_delete_order_prod"  value="{$product_id}"     class="button"></button></td>

CSS

.button
        {
        background: url(<?php echo $url; ?>) no-repeat;
        cursor:pointer;
                    border: none;
        }

【问题讨论】：

stackoverflow.com/questions/8818543/…你看过这个吗？

标签： css html

【解决方案1】：

您可以使用 CSS 将文本移动到页面外的某个位置，例如：

.button {
   text-indent: -10000px;
}

根据特里的评论，可以这样做：

.button {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

【讨论】：

或者，使用新的 text-indent 替换，主要是因为高度否定的 text-indent 实际上会强制浏览器渲染所有指定的像素；）zeldman.com/2012/03/01/…
@fanfavorite，谢谢你的回答，我试过了，效果很好。有没有其他方法可以使文本不可见？如果没有，那么这是我必须在我的 CSS 中添加文本缩进的唯一选择。
@Terry：通过文本缩进替换你的意思是css中的以下代码吗？ .hide-text { 文本缩进：100%;空白：nowrap；溢出：隐藏； }
@Terry 没有意识到这一点。我也添加了您的解决方案。
谢谢大家欣赏。

【解决方案2】：

您可以在按钮上使用 data-value 属性来存储您需要的值，然后使用 jquery 将其拉出。

【讨论】：

【解决方案3】：

您可以使用链接而不是按钮并通过GET 或使用javascript POST/PUT 传递参数使用本教程制作带有链接的漂亮图像按钮或仅按钮/输入提交http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

更新我现在正在一个网站上工作，该网站有一个图像按钮，代码：

css

input[type="submit"] {
position: absolute;
width: 122px;
height: 33px;
margin: 382px 0 0 500px;
border: 0 none;
background: none;
background-image: url(/images/asset/form.png);
background-position: -678px -525px;
z-index: 2;
}

html

<input type="submit" value="">

【讨论】：

嘿卢卡斯，我不想要文字，因为我只是想放一个十字按钮（图片）
这样您就不需要在链接上放置文本，代码完成类似于<a href='yourlink.php?id=34' class='btn'></a> 的内容，css 文件放置图像并修复元素的宽度/高度。引导框架使用大量的链接按钮和行为。