Question

有什么方法可以在同一位置的某些圆形图像上放置一个小点div？图片由我的网站用户选择，因此他们没有固定的尺寸。我想把这个点放在下面这张照片中。

修改：抱歉没有提供代码。同时，我通过css定位img宽度找到了解决方案。这是我的工作示例代码：

<div class="img-box">
    <a class="avatar-link" href="#">
         <img width="100" height="100" alt="avatar" src="http://image.prntscr.com/image/28ad5c0c6da14d4abcaba545fd115289.png" class="user-avatar">
         <div class="user-status"></div>
   </a>
</div>

<div class="img-box">
    <a class="avatar-link" href="#">
         <img width="140" height="140" alt="avatar" src="http://image.prntscr.com/image/e1c7dec3eced491b8a16ac8d1103b5ea.png" class="user-avatar">
         <div class="user-status"></div>
    </a>
</div>

css代码：

.img-box{    
    margin: 40px;
}

a.avatar-link{
    position: relative;
    display: inline-block;
}

.img-box img.user-avatar{
    border-radius: 50%;
    display: block;
}

.user-status {
    border-radius: 50%;
    height: 10px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 10px;
    background-color: #ED0000;
}

.img-box img.user-avatar[width="140"] + .user-status{
   right: 16px;
   bottom: 15px;
}

Working example

Answer 1

任何视觉元素都不应出现在您的文档中。

使用CSS伪元素可以实现这种视觉效果。

HTML

<div class=circle></div>

SCSS

.circle {
  border: 1px solid black;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  padding: 50px;
  margin: 50px;
  position: relative;
  &::after {
    display: block;
    content: " ";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid black;
    position: absolute;
    right: 50px;
    bottom: 10px;
  }
}

编译CSS

.circle {
  border: 1px solid black;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  padding: 50px;
  margin: 50px;
  position: relative;
}
.circle::after {
  display: block;
  content: " ";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black;
  position: absolute;
  right: 50px;
  bottom: 10px;
}

如果需要动态设置任何内容，请尝试使用JavaScirpt更改CSS属性值。

CodePen示例（它只是一个示例，但您明白了这一点），https://codepen.io/li-xinyang/pen/qrWZgY

Answer 2

您需要将bottom和right位置设置为百分比，然后使用transform根据红色圆圈的宽度/高度调整位置。

我创建了一个名为corner finder的元素来计算出百分比值（试错，我不知道数学是什么）。这可以从您的实际代码中删除，但有助于演示该过程。随着圆圈变得非常大，它会稍微偏离，但它会很接近。

＆＃13;

.img-box {
  margin: 40px;
}

.avatar-link {
  display: inline-block;
  position: relative;
}

.avatar-link::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 14.8%;
  right: 14.8%;
  width: 10px;
  height: 10px;
  background-color: red;
  transform: translate(5px, 5px); /* half width and height */
  border-radius: 50%;
}

.avatar-link img {
  border-radius: 50%;
  vertical-align: top;
}

/* Can be removed, just for demonstration */
.corner-finder {
  position: absolute;
  top: 14.8%;
  bottom: 14.8%;
  right: 14.8%;
  left: 14.8%;
  background-color: rgba(0,0,0,0.3);
  z-index: 1;
}

＆＃13;

<div class="img-box">
  <a class="avatar-link" href="#">
    <div class="corner-finder"></div>
    <img src="http://placehold.it/100x100" alt="">
  </a>
</div>

<div class="img-box">
  <a class="avatar-link" href="#">
    <div class="corner-finder"></div>
    <img src="http://placehold.it/200x200" alt="">
  </a>
</div>

<div class="img-box">
  <a class="avatar-link" href="#">
    <div class="corner-finder"></div>
    <img src="http://placehold.it/300x300" alt=""> 
  </a>
</div>

<div class="img-box">
  <a class="avatar-link" href="#">
    <div class="corner-finder"></div>
    <img src="http://placehold.it/400x400" alt="">
  </a>
</div>

＆＃13;

将点元素放置在同一位置的圆形图像上

2 个答案: