Question

我试图在图片上添加一些带有文字的圈子。

在全屏模式下没有问题，但是当我调整窗口大小时，圆圈正在移动而不是停留在他们的位置。

代码：

＆＃13;

<div style="margin: 0 auto 0 auto;width: 100%;">
    <img src="http://www.gimpfr.org/document/document_10/images/straight_line_example.png" width="600" height="500" alt="top" style="position:absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;">
    <div style="-webkit-border-radius:100px;-moz-border-radius:100px;-o-border-radius:100px;border-radius:100px;width:20px;height:20px;background-color:red;position: absolute;margin-left:60%"></div>
    <div style="-webkit-border-radius:100px;-moz-border-radius:100px;-o-border-radius:100px;border-radius:100px;width:20px;height:20px;background-color:red;position: absolute;margin-left:40%;margin-top:15%;"></div>
</div>

＆＃13;

是否可以仅使用css或者我应该使用jquery或类似的东西？

Answer 1

假设您的浏览器是最新的，我建议使用<canvas>容器。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 69, 50);
      };
      imageObj.src = 'http://linktoyourimage.jpg';
    </script>
  </body>
</html>

drawImage()方法采用容器变量，以及您要放置图像的目标点。

要添加圈子，您需要添加更多代码：

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

这将在画布中添加一个圆，基于具有给定半径的中心X，Y位置。您需要创建这些变量。

作为附注，Canvas Tutorials如果您从特定于html5的代码开始，则会提供一些很好的参考信息。

Answer 2

只需设置正确的定位即可。主div可以是相对的也可以是绝对的，圆圈则是绝对的。

看到这个小提琴：https://jsfiddle.net/5nfjdgLL/1/ 圆圈处于保持位置。您可以调整窗口大小或调整jsfiddle输出面板的大小。

HTML：

   <div class=container>
      <img src=http://www.gimpfr.org/document/document_10/images/straight_line_example.png>
      <div class=circle1></div>
       <div class=circle2></div>

    </div>

CSS：

.container{
  position:relative; margin: auto; width:478px; height:308px;
  }
  .circle1, .circle2 {background:red; width:20px; height:20px; border-radius:10px;}
  .circle1{position:absolute; top:10px; left:300px;}
  .circle2{position:absolute; top:50px; left:200px;}

在图片上添加圆圈div

2 个答案: