html - 使用 CSS 在图像上放置一个红点

我正在解析一个文本文件,其中包含对本地图像的引用,后跟坐标。

Click "{ImageFolder}/1411634917956.png" 8 29
Click "{ImageFolder}/3465738200284.png" 23 45
Click "{ImageFolder}/7848239847583.png" 38 15

输出是一个 html 文件,显示上面解析为 html 的图像文本:

<img src="./scripts/images/1411634917956.png">
<img src="./scripts/images/3465738200284.png">
<img src="./scripts/images/7848239847583.png">

我还想解析坐标,这意味着从顶部开始的图像高度百分比和从左侧开始的图像宽度百分比,以便在指定坐标上的图像上添加一个红点。

我尝试了以下方法,但 :before 标签似乎没有动态更新

演示

div:before{
    position: absolute;
    left: 50%;
    top: 50%;
    width:5px;height:5px;
    background:red;
    content:'';
}
div {
    position: absolute;
}
<div>
    <img style="left:10%;top:10%;" src="https://static.boredpanda.com/blog/wp-content/uploads/2016/02/japanese-grumpy-cat-angry-koyuki-moflicious-22.jpg"/>
</div>

回答1

将其绝对定位,然后更改 topleftbottomright value。

.container{
  height:100vh;
  display:flex;
  justify-content:center;
}
.image-container{
height:100%;
  position:relative;
}

img{
  height:100%;
}

.image-container:before{
  content:"";
    position: absolute;
    padding: 10px;
    background: red;
    border-radius: 50%;
    top: 50%;
    left: 50%;
}
<div class="container">
  <div class="image-container">
    <img src="https://static.boredpanda.com/blog/wp-content/uploads/2016/02/japanese-grumpy-cat-angry-koyuki-moflicious-22.jpg"/>
</div>
</div>

相似文章

jquery - 分页编号序列不起作用(jquery)

如果我单击任何数字,分页顺序将不起作用。如果我单击数字3,它会跳到数字4,每次我单击该数字时,它都会跳到另一个数字。但是,如果我单击下一个和上一个按钮,它就可以正常工作。它的发生是因为省略号li。任何...

html - 如何使 menu 中的所有项目都具有粘性?

我正在尝试向我的网站添加一个menu栏,它看起来几乎是我想要的方式,左边是汉堡包,右边是两个联系信息。然而,只有汉堡是粘性的。另外,我想为menu添加背景颜色,以便在滚动网页时,粘性位整齐地位于彩色条...

最新文章