css - 如何使按钮值不可见并向按钮添加图像

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;
}