Question

你好我试图把一个文本或图像放在一个按钮里，任何人都可以帮我这么做这就是我所做的事情

<div id ="bss"><input class="but" type="button" /><center>Mohammad ghazi istanbouly</center></div>


<style type="text/css">
            .but{
              width:100px;
              height:35px;
              box-shadow: 5px 5px 10px #777;
              position: absolute;
              top:20px;
              left:22px;
              background-color: #000;
              background: rgba(0,0,0,0.86) ;
              border-radius: 15px;
              color: yellow ;
            }


   </style>


<script type="text/javascript">

           var bss_node = document.getElementById("bss");
           bss_node.style.color = "#000"  ;
           bss_node.style.fontSize ="50px"     ;
           bss_node.style.border = "1px solid #000" ;
           bss_node.style.boxShadow ="10px 5px 10px #777"     ;
           bss_node.style.borderRadius ="15px"

           var but_node = document.getElementById("but") ;
           but_node.innerText="Log in"

     </script>

所以请任何人纠正我并告诉我如何在按钮内输入文字也是图片感谢您的帮助（Y）

Answer 1

将文字放入按钮使用：

<input class="but" type="button" value="SOME TEXT IN THE BUTTON" />

将图像插入按钮：

<input class="but" type="button" style="background-image: url(myimage.png)"/>

编辑：要更改按钮的大小以使图像适合它，请使用以下命令：

<input class="but" type="button" style="background-image: url(myimage.png); width: 100px; height: 100px"/>

只需根据图像大小更改两个100px！

Answer 2

首先，不推荐使用<center>标记，因此请勿使用它;第二，更重要的是，你可以（字面上）将图像放入<button>：

<button><img src="path/to/image.png" /></button>

要包含文本，然后（如上所示），<button>元素可以包含（非交互式）HTML元素，例如：

<button><p>Whatever text you'd like to enclose</p></button>

当然，如果您需要将此图像作为<button>的背景图像，那么CSS还允许您实现：

button {
    background-image: url(path/to/image.png);
}

参考文献：

<button>。
<center>。

如何在按钮中包含图像或文本？

2 个答案: