开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我正在尝试添加两个按钮在中心的图像重叠它使用普通的HTML

您好！感谢您提供的问答内容。根据您的描述，您想要在中心的图像上添加两个按钮，并使用普通的HTML来实现。下面是我为您提供的完善且全面的答案：

在HTML中，您可以使用以下代码来实现在中心的图像上添加两个按钮：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<div class="container">
  <img src="your-image.jpg" alt="Your Image" class="centered">
  <button class="button">Button 1</button>
  <button class="button">Button 2</button>
</div>

</body>
</html>

上述代码中，我们首先创建一个包含图像和按钮的容器（<div class="container">）。然后，我们使用CSS将图像定位在容器的中心位置（.centered）。接下来，我们使用CSS样式定义了按钮的外观和样式（.button）。您可以根据需要自定义按钮的样式。

请注意，上述代码只是一个示例，您需要将your-image.jpg替换为您自己的图像路径。

这种方法适用于普通的HTML开发，无需使用特定的云计算服务或产品。它可以在任何支持HTML的环境中使用，例如网页、移动应用等。

希望以上信息对您有所帮助！如果您有任何其他问题，请随时提问。

相关搜索:我正在尝试使用androoid studio中的FFmpeg lib在视频上添加文本和图像我正在尝试使用c#和xaml在画布上移动我的图像我正在尝试在Javascript中向我的图像添加单击事件，但未成功我正在尝试使用flask在html中显示来自AJAX调用的值。我正在尝试添加Instagram类型的滤镜，以便使用React-native为我的图像添加一些效果。我正在尝试用两个按钮计算按钮点击的总次数，并将其显示在文本区域中我有两个ImageButtons，它的onClick将导致webview。但是我不能添加第二个图像按钮我正在尝试使用jquery在加载被单击的页面后更改被单击的菜单按钮的颜色我正在尝试添加一个功能，当我的场景摄像机在React中滚动时，可以移动它我正在尝试使用jimp在我的dicrod上放置一个经过处理的图像来欢迎人们。我正在尝试使用Xcode9.2构建和启动我的应用程序，当我在设备上构建它时，它只是一个白屏我正在尝试使用我自己的discord机器人制作reaction角色，但由于某种原因，它没有添加角色，尽管它添加了reaction $timeout在我的代码中不起作用。我正在尝试使用此指令延迟html元素在特定时间后显示我正在尝试使用Winapi检查指定的窗口是否对屏幕可见，但不确定当两个窗口不重叠时如何处理我正在尝试将我的两个按钮放在我的样式div中，但我希望其中一个按钮在我拥有的表单中，另一个在提交表单之外尝试使用PHP循环HTML按钮，并使用querySelector在JS中添加EventListener，但只有第一次迭代的按钮被选中我想在我的网站上添加一个幻灯片。我正在使用html，css，并且想使用jquery。如何创建响应式图像幻灯片我正在尝试使用脚本在HTML中创建一个包含8x8个正方形的表格正在尝试使用HTML、css Bootstrap4和JavaScript编写石布剪刀游戏，并且无法让我的函数选择新图像来工作在我添加了一个使用html，css和js的自定义光标后，该光标在链接或按钮.How上不起作用，我应该解决它吗？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

云+社区技术沙龙[第21期]
计算机视觉的原理及最佳实践
2019-04-13北京直播结束

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭