Question

如何为按钮指定图像并使其值消失，以便仅在屏幕上显示图像。我正在使用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;
        }

Answer 1

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

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

根据Terry的评论，可以做类似的事情：

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

Answer 2

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

Answer 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="">

如何使按钮值不可见并将图像添加到按钮

3 个答案: