add circle div на картинке

Я пытаюсь добавить несколько кругов с текстом на картинке.add circle div на картинке

В полноэкранном режиме проблем нет, но когда я изменяю размер окна, круги перемещаются, а не остаются на своих позициях.

Код:

<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>

Можно ли это сделать только с помощью CSS или я должен использовать JQuery или что-то подобное?

источник

2016-03-08 lluserll

Какой браузер вы используете? Причина, по которой я спрашиваю, заключается в том, что кажется, что ваш вопрос лучше всего решить, используя контейнер SVG или Canvas. – Jon

mozilla - chrome – lluserll

Просто установите правильное положение. Основной 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;}

источник

2016-03-08 20:45:04 Zorak

Он отлично работает благодаря – lluserll

Предполагая, что ваш браузер в актуальном состоянии, я бы предложил использовать контейнер <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.

источник

2016-03-08 20:35:49 Jon

Я не могу попробовать, но спасибо за ответ. Я постараюсь реализовать его, когда смогу – lluserll

add circle div на картинке

ответ

Смежные вопросы