开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我正在尝试添加两个按钮在中心的图像重叠它使用普通的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上不起作用，我应该解决它吗？

相关搜索:

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

有帮助

没帮助

相关·内容

前端课程——盒子模型

盒子模型又称为框模型，HTML页面所有的元素都具有盒子模型，该模型用于设计HTML页面和实现HTML页面布局。

01

遮挡重叠场景下|基于卷积神经网络与RoI方式的机器人抓取检测

抓取物体堆叠和重叠场景中的特定目标是实现机器人抓取的必要和具有挑战性的任务。在本文中，我们提出了一种基于感兴趣区域（RoI）的机器人抓取检测算法，以同时检测目标及其在物体重叠场景中的抓取。我们提出的算法使用感兴趣区域（RoIs）来检测目标的分类和位置回归。为了训练网络，我们提供了比Cornell Grasp Dataset更大的多对象抓取数据集，该数据集基于Visual Manipulation Relationship Dataset。实验结果表明，我们的算法在1FPPI时达到24.9％的失误率，在抓取我们的数据集时达到68.2％的mAP。机器人实验表明，我们提出的算法可以帮助机器人以84％的成功率掌握多物体场景中的特定目标。

01

【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果

最近，群里聊到了一个很有意思的布局效果。大致效果如下所示，希望使用 CSS 实现如下所示的布局效果：

01

带有 WinPaletter 的高级 Windows 外观编辑器

无需更改存储在注册表编辑器中的键值即可为 Windows Accents 添加一些自定义。 WinPaletter 让您轻松自由地完成它。它可以帮助用户不受限制地为 Windows 11 Accents 着色。

04

JavaScript—事件

当我们的鼠标点击到窗口上的按钮时，并不是鼠标的箭头真正点击到这个按钮了，而是鼠标发出了一个动作事件，然后这个事件先被传送到了操作系统的命令处理带，然后再传送到负责显示图形的图像数据层，事件到这里后图像数据层会先看哪个程序的窗口在最上面(因为不是在最上面就没必要看了)，再根据鼠标提供的X Y坐标确认点击的是哪个窗口上的按钮，接着再确认这个窗口是哪个程序。

02

基于ENVI与ERDAS的Hyperion高光谱经验比值、一阶微分法叶绿素及地表参数反演

前面几篇博客介绍了基于Landsat这一多光谱遥感图像数据的多种地表温度（LST）反演方法，大家可以参考博客1[1]、博客2[2]、博客3[3]；那么接下来，我们就将基于比多光谱数据可以说是更进一步的高光谱卫星数据——大名鼎鼎的Hyperion数据，进行多种其他地表参数的反演。其中，在此之前可以先了解一下国内外主流的星载高光谱传感器及其平台的相关信息[4]。

03

谷歌GAN 实验室来了！迄今最强可视化工具，在浏览器运行GAN

Google AI和乔治亚理工学院的研究人员发布了一个学习GAN的交互式网站：GAN Lab！由TensorFlow.js 驱动，在浏览器就可以运行GAN，非常直观地了解各种GAN模型的机制，可谓是一大神器。发布后迅速获得好评。

03

SSD(Single Shot MultiBox Detector)原理详解

在这篇文章中，我将讨论用于目标检测任务的 Single Shot Multi-box Detector。该算法属于一次性分类器系列，因此它的速度很快，非常适合嵌入到实时应用程序中。SSD的关键特征之一是它能够预测不同大小的目标，并且为现在很多算法提供了基本的思路。我们从讨论算法的网络架构开始这篇文章，然后我们将深入研究数据增强、锚框和损失函数。

02

真Anchor Free目标检测----CenterNet详解

最近anchor free的目标检测方法很多，尤其是centernet，在我心中是真正的anchor free + nms free方法，这篇centernet对应的是"Objects as Points"，不是另外一篇"CenterNet- Keypoint Triplets for Object Detection"。作者xinyi zhou也是之前ExtremeNet的作者。

04

目标检测算法之AAAI 2020 DIoU Loss 已开源(YOLOV3涨近3个点)

前面介绍了CVPR 2019的GIoU Loss,同时GIoU Loss里面也引入了IoU Loss，这个首先需要明确一下。然后AAAI 2020来了一个新的Loss，即是本文要介绍的DIoU Loss。论文原文地址见附录。

02

第156天：canvas（三）

translate方法接受两个参数。x 是左右偏移量，y 是上下偏移量，如右图所示。

01

Day 3 学习Canvas这一篇文章就够了

一、canvas简介 <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。 Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。 Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。二、Canvas基本使用 2.1 <canvas>元素

02

一篇文章带你了解SVG 图标

SVG图标是SVG图像，用作Web应用程序或移动应用程序内的图标或图像按钮。SVG图标也可以用于徽标。文章说明了SVG图标如何创建自己的SVG图标，以及在何处可以下载高质量的预制SVG图标。

03

求线性卷积_卷积神经网络目标检测

SiamFC论文地址 SiamFC论文百度网盘下载地址 ❗提取码：7309❗ SiamFC论文翻译(水印)百度网盘下载地址 ❗提取码：4ysm❗ SiamFC论文翻译(无水印PDF+Word)下载地址

04

CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果

本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow()，实现对 HTML 元素及 SVG 元素的部分添加阴影效果，以实现一种酷炫的光影效果，用于各种不同的场景之中。通过本文，你可以学到：

02

目标检测（Object detection）

这次我们学习构建神经网络的另一个问题，定位分类问题。这意味着我们不仅需要判断图片中是不是一辆车，还要在图片中将他标记出来。“定位”的意思是判断汽车在图片中的具体位置。分类定位问题通常只有一个较大对象位于图片中间位置，我们要对它进行识别和定位。而在对象检测问题中，图片中可以含有多个对象。甚至单张图片中会有多个不同分类的对象。因此，图片分类的思路可以帮助学习分类定位，而对象定位的思路有助于学习对象检测。图片分类问题：例如，输入一张图片到多层卷积神经网络，它会输出一个特征向量，并反馈给softmax单元来预测图片类型。

01

CNN卷积神经网络 ILSVRC-2012

训练一个庞大的深层卷积神经网络，将ImageNet LSVRC-2010比赛中的120万张1000种不同类别的高分辨率图像进行分类。在测试数据上，top-1和top-5的误差率分别为37.5%和17%，这比以往的先进水平都要好得多。它具有6000万个参数和650,000个神经元，该神经网络由五个卷积层，其中一些有池化层，和三个全连接层且有1000-way的softmax回归模型。使用非饱和神经元和GPU加速加快训练速度，并采用dropout正则化方法来减少全连接层中的过拟合，取得了不错的实验效果。同时，在ILSVRC-2012比赛中加入了该模型的一个变式，以15.3%的top-5误差率胜过第二的26.2%。

03

Google Earth Engine (GEE) ——Earth Engine Explorer (EE Explorer)使用最全解析（8000字长文）

Earth Engine Explorer (EE Explorer) 是一个轻量级地理空间图像数据查看器，可以访问Earth Engine Data Catalog 中提供的大量全球和区域数据集。它允许快速查看数据，并能够在地球上的任何地方进行缩放和平移、调整可视化设置以及对数据进行分层以检查随时间的变化。

01

前端利器！让AI根据手绘原型生成HTML | 教程+代码

这么多环节，任何地方出一点问题，都会拉长开发周期。因此，不少公司，比如Airbnb已经开始用机器学习来提高这个过程的效率。

03

Google | 用神经网络作画

Google最近正在研究一个新实验，让人工智能帮你画画，具体地说，是帮助你更快更准确地画画。该软件称为Sketch-RNN，是一个简单易用的网络应用程序。谷歌的想法很简单：先选择一个已经存在的对象，开始绘制，软件会尝试找到自动画好它的最佳方法。进入此链接可运行sketch-rnn的演示demo： https://magenta.tensorflow.org/assets/sketch_rnn_demo/index.html 对于移动端用户的数据连接：此第一个演示的大小约为5 MB数据。每次在演示中更改模

02

手把手教你实现自定义轮播图：使用HTML、CSS和JavaScript构建

大家都在许多网站上见过轮播图。你可能也在自己的Web项目中使用过一些框架如Bootstrap来实现它。

01

学界 | 在有池化层、1步幅的CNN上减少冗余计算，一种广泛适用的架构转换方法

选自arXiv 机器之心编译参与：刘天赐、刘晓坤 CNN 的近邻图像块计算中一般都存在冗余问题，当存在池化层或步幅为 1 时，减少冗余的方法将变得更加复杂。本文中，来自德国 AI 研究中心等机构的研究者提出了一种在有池化层和步幅为 1 时也能有效减少冗余的方法。他们的方法普遍性很强，可应用于几乎全部现有的 CNN 架构上，来实现快速的特征提取。虽然绝大多数的 CNN 都直接运行在整张图像上，但还有很多重要任务需要使用基于图像块（patch based）的 CNN 来处理：在一个邻近、重叠的图像块上多次运

05

深度学习论文随记（一）---AlexNet模型解读

本文介绍了深度学习的背景和意义，并对AlexNet模型进行了详细解读。文章还分析了创新点，包括ReLU激活函数、Dropout层、数据扩充、重叠池化、LRN局部响应归一化等。最后，文章介绍了图片预处理的方法，包括大小归一化和减去像素平均值。

00

你不知道的HTML

我的答案很简单：HTML。而且我一点也没有讽刺或嘲弄。当然，我非常清楚在哪些情况下使用哪些标签，以及如何使我的 HTML 大部分具有语义性和可访问性。

我至今没想到，我也能在 CSS 中实现 SVG 动画了

动画是网络中不可或缺的一部分。与互联网早期使用 GIF 图像不同，现在的动画更加细腻和高雅。设计师和前端开发者利用动画使网站看起来更加精致，不仅提升用户体验，还吸引用户关注重要的元素，以传达信息。

01

什么是网络测试

Web测试是用于验证网站应用程序是否可以满足特定功能，安全性，可用性，可访问性，视觉和性能标准的过程。在将代码移交给生产之前，Web测试对于捕获关键错误的应用程序的成功至关重要。Web测试可以分为许多组件，包括但不限于：

03

Refactoring UI

03

基于深度学习的图像语义分割算法综述

本文翻译自An overview of semantic image segmentation，原作者保留版权。

04

python灰度图生成g代码_tcam2009利用灰度图生成雕刻机所需的G代码

双击桌面的artcam快捷方式图标打开软件首先看到如下的界面。点击“通过图像产生模型” 利用ART CAM 软件制作浮雕刀路的方法

02

那些你从不使用的 HTML 属性，背后竟然大有文章，赶快了来了解下

快速总结 ↬ 在这篇文章中，Louis Lazaris 描述并演示了一些有趣的 HTML 属性，您可能听说过也可能没有听说过，并且可能会发现它们非常有用，可以在您的项目中亲自使用。

03

腾讯地图JavaScript API GL实现文本标记的碰撞避让

本文主要是总结一下web页面中的旋转矩形的碰撞检测，碰撞算法本身并不难，只是需要注意web坐标系在计算中的影响。碰撞检测应该是在游戏等场景中很常见且基础的功能，本文记录了在JavaScript API GL遇到了这类碰撞问题的调研和实现的过程。

04

SwiftUI：使用 CGAffineTransform 和奇偶填充来变换形状

当您不再满足于简单的形状和路径时，SwiftUI的两个有用功能会合在一起，以极少的工作量创建出漂亮的效果。第一个是CGAffineTransform，它描述了如何旋转，缩放或剪切路径或视图。第二个是奇偶填充(even-odd fills)，它使我们可以控制应如何渲染重叠的形状。

03

Flutter中构建布局顶

然后本指南回过头来解释Flutter的布局方法，并说明如何在屏幕上放置一个小部件。在讨论如何水平和垂直放置小部件之后，会介绍一些最常见的布局小部件。

01

卷积神经网络（四） ——目标检测与YOLO算法

卷积神经网络（四） ——目标检测与YOLO算法（原创内容，转载请注明来源，谢谢）一、概述目标检测，主要目的是在图片中，分类确认是否有需要的物体，如果有则标出对应的物体。二、目标定位目标定位（

06

Cesium入门之五：认识Cesium中的Viewer

Viewer是Cesium中用于显示3D场景的组件。它提供了创建和控制3D场景所需的所有基本功能，包括加载3D模型、添加图像覆盖物、设置相机位置和方向、处理用户输入等。

04

FCOS: Fully Convolutional One-Stage Object Detection

我们提出一种全卷积的单阶段目标检测器(FCOS)，以逐像素预测的方式解决目标检测问题，类似于语义分割。几乎所有最先进的目标探测器，如RetinaNet、SSD、YOLOv3和Faster R-CNN，都依赖于预定义的锚盒。相比之下，我们提出的探测器FCOS是Anchor Free，以及proposal自由。通过消除预定义的锚盒集合，FCOS完全避免了与锚盒相关的复杂计算，例如在训练过程中计算IoU。更重要的是，我们还避免了所有与锚盒相关的超参数，这些超参数通常对最终检测性能非常敏感。通过唯一的后处理非最大抑制(NMS)，使用ResNeXt-64x4d-101的FCOS在单模型和单尺度测试下，AP达到44.7%，超越了以往单阶段检测器。我们首次演示了一个更简单、更灵活的检测框架，从而提高了检测精度。我们希望所提出的FCOS框架可以作为许多其他实例级任务的简单而强大的替代方案。

02

学习总结之HTML5剑指前端（建议收藏，图文并茂）

学习《HTML5与CSS3权威指南》这本书很不错，学完之后我颇有感触，觉得web的世界开明了许多。这本书是需要有一定基础的web前端开发工程师。

01

CVPR2021 | MIMO-VRN 用于视频缩放任务的联合训练策略

代码链接：https://github.com/ding3820/MIMO-VRN

04

ASM-Net：可解释的美学评分及图像剪裁

基于美学的图像裁剪（aesthetic image cropping）的目标是在一张图片中找到具有最高美学评价的子图。

01

在Gazebo中使用DEM構建起伏地形環境

1. https://bitbucket.org/osrf/gazebo_tutorials/raw/default/dem/files/

03

[译] End-to-end people detection in crowded scenes

检测效果图题目：拥挤场景中的端到端人物检测 (推荐阅读英文原文) 文章地址：《End-to-end people detection in crowded scenes》 arXiv.1506.04878 Github：https://github.com/Russell91/ReInspect (未经允许禁止转载，授权转载请注明出处，谢谢！) ---- Abstract 目前的人物检测操作要么是以滑动窗口的方式扫描图像，或者通过分类一组离散的决策。我们提出了基于将图像解码成一组人物检测的模型。我

06

基础渲染系列（八）——反射

（温馨提示：本系列知识是循序渐进的，推荐第一次阅读的同学从第一章看起，链接在文章底部）

03

ACM MM 2023 | PanoDiff：从窄视场图片生成全景图

全景图像捕捉的视场广泛，包括360°水平方向和180°垂直方向视场范围。全景图在各种应用中变得越来越重要，例如环境照明、虚拟现实/增强现实和自动驾驶系统。但是获得高质量的全景图像可能既耗时又昂贵，因为通常需要使用专门的全景相机或拼接软件将来自多个角度的图像合并在一起。

03

matlab计算多重复杂多边形重叠面积

最近在学习中遇到了求多边形图像重叠面积问题，经查阅资料发现polyshape函数可以解决此问题，下面总结一下本次学习的心得：

04

教程 | 单级式目标检测方法概述：YOLO与SSD

在这篇文章中，我将概述用于基于卷积神经网络（CNN）的目标检测的深度学习技术。目标检测是很有价值的，可用于理解图像内容、描述图像中的事物以及确定目标在图像中的位置。

01

Yolo发展史(v4/v5的创新点汇总！)

作者总结了近几年的单阶段和双阶段的目标检测算法以及技巧，并用一个图概括了单阶段和双阶段目标检测网络的差别，two-stage的检测网络，相当于在one-stage的密集检测上增加了一个稀疏的预测器

03

【目标检测Anchor-Free】CVPR 2019 Object as Points（CenterNet）

前天发了一个推文【目标检测Anchor-Free】CVPR 2019 CenterNet，讲解的是CenterNet: Keypoint Triplets for Object Detection这篇论文，今天要讲的这篇论文全名是Object as Points。这篇论文提出的网络也被叫作CenterNet，和前面介绍的CenterNet重名了，注意加以区别。论文原文见附录。

01

目标检测系列之一（候选框、IOU、NMS）

目前计算机视觉（CV，Computer Vision）与自然语言处理（NLP，Natural Language Process）是深度学习的主要研究领域。而计算机视觉的三大任务是图像分类、目标检测和目标分割。

01

基于深度学习的图像语义分割算法综述

本文翻译自An overview of semantic image segmentation，原作者保留版权。

02

「图像处理」U-Net中的重叠-切片

CW，广东深圳人，毕业于中山大学（SYSU）数据科学与计算机学院，毕业后就业于腾讯计算机系统有限公司技术工程与事业群（TEG）从事Devops工作，期间在AI LAB实习过，实操过道路交通元素与医疗病例图像分割、视频实时人脸检测与表情识别、OCR等项目。

00

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭