Question

我想知道如何创建一个HTML格式的可点击按钮，该按钮位于标题图像的中心。

我尝试使用按钮标签以及href属性以及img标签来尝试将代码包装在所需的图像周围，但它不起作用。我想要实现的结果示例可以在github.com的标题中找到。

Answer 1

我不确定您是否只想要一个以标题图片为中心的按钮，或者是否有想要将图案设置为按钮一部分的图像。（发布截图是为了清晰，也许？）这是一个代表前者的片段。

＆＃13;

.header {
  background-image: url('http://lorempixel.com/640/200/');
  width: 640px;
  height: 200px;
  text-align: center;
}

.header button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }

＆＃13;

<header class="header">
  <button onclick="alert('You clicked me!');" id="myButton">Click me!</button>
</header>

＆＃13;

Answer 2

欢迎您来SO！

首先，你应该总是发布一些代码，这样我们就可以看到你已经尝试了一些东西。

我正在努力实现可以在github.com的标题中找到

查看其构建方式的简单方法是使用浏览器中提供的一些开发人员工具检查此元素的代码（但请不要IE ）

如果您是HTML新手，您还应该尝试按照一些教程阅读一些必要的文档（可以找到here）并确定您不想错过那些花哨的CSS内容，所以你还应该检查this。

现在回答您的问题

GitHub使用了什么＆＃34;按钮＆＃34;是<a>标记，其中包含<span>标记，使用Octocat图标作为字体。

<强>样本

＆＃13;

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
  font-size: 16px;
}
.icon {
  font-size: 3em;
}

＆＃13;

<a href="https://google.com" target="_blank" class="icon">
  <span class="glyphicon glyphicon-star"></span>
</a>

＆＃13;

Answer 3

你基本上想要使用带有背景图像的div结构，给它一个明确的宽度和高度，并将其位置设置为relative。然后，您可以将按钮放在div内。有几种方法可以做到这一点。

这是fiddle example

如何使用html在标题图像上创建可点击按钮？

3 个答案: