添加 CSS
- 设置背景属性并指定所需的 URL。
- 将光标属性设置为“指针”。
- 添加宽度、高度和边框属性。
.example {
background: url('button.png') no-repeat;
cursor: pointer;
width: 300px;
height: 200px;
border: none;
}
这是我们代码的结果。
更改按钮输入图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.example {
background: url('button.png') no-repeat;
cursor: pointer;
width: 300px;
height: 200px;
border: none;
}
</style>
</head>
<body>
<form>
<input type="submit" class="example" value="" />
</form>
</body>
</html>
在上面的示例中，我们使用 background 属性来包含背景图像。
如果需要，我们还可以更改图像类型。
接下来，请看我们使用 <button> 元素更改图像按钮的示例。
更改按钮图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
button {
background-image: url('button.png');
background-size: cover;
width: 400px;
height: 300px;
font-size: 2em;
}
</style>
</head>
<body>
<button type="submit">Button</button>
</body>
</html>
在我们的最后一个示例中，当我们将鼠标悬停在按钮上时会出现图像。
这在制作对鼠标做出反应的按钮时很有用。
在悬停时更改按钮图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
button {
width: 400px;
height: 300px;
border: 0;
cursor: pointer;
font-size: 2em;
}
button:hover {
background-image: url('button.png');
background-size: cover;
}
</style>
</head>
<body>
<button type="submit">Button</button>
</body>
</html>
创建 HTML
- 使用 submit 作为 <input> 类型。
- 添加类和值属性。
<input type="submit" class="example" value="" />
按钮使更具吸引力，但有时很难对其进行样式设置，尤其是当我们需要将按钮更改为图像时。
幸运的是，有一些方法可以做到这一点。
在我们的代码片段中，我们将展示如何使用 <input> 和 <button> 元素将按钮更改为图像。
从创建 HTML 开始。
日期：2020-06-02 22:14:59 来源：oir作者：oir