如何在图像前面添加一个圆圈答案

【问题标题】：How to add a cicle in front of an image如何在图像前面添加一个圆圈
【发布时间】：2017-11-17 02:25:03
【问题描述】：

我正在尝试在图像前添加一个圆圈（该圆圈将包含一个图标）。我的代码工作正常，但只能在大屏幕上显示； 1,224 及以上......但是，平板电脑和移动设备并非如此......所以，我的问题是：如何修复我的代码并使其适用于所有设备，而不使用 @media。如果@media 是唯一的解决方案，那我就去吧..

HTML

<div class="row">
            <div class="col-md-3">
                <div class="service-box">
                    <div class="service-circle" >
                        <!--Add icon inside circle -->
                        
                    </div>
                    <div class="service-bg" style="background-color:  black;"> 
                    <!--  Insert img-->
                    </div>
                    
                    <div class="service-text">
                        <h3>
                            ENTER TITLE
                        
                        </h3>
                    </div>
                </div>
                
            </div>
            <div class="col-md-3">
                
                
            </div>
            <div class="col-md-3">
                
                
            </div>
            <div class="col-md-3">
                
                
            </div>
            
        </div>

CSS/LESS

.service-box {
    
    
    
    .service-circle{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: table-cell;
        vertical-align: middle;
        color: #000;
        line-height: 500px;
        text-align: center;
        background: #fff;
        position: absolute;
        left: 30%;
        margin-top: 65%;
        border: 5px solid #e6ab43;
        
        
    }
    
    .service-bg {
        height: 250px;
        border:1px solid black;
        img{
            
            height: 100%;
        }
        
    }
    
    .service-text {
        text-align: center;
        margin-top: 30%;
        
    }
    
    
    
}

更新：

这就是我想要做的：

因此，我使用col-sm-3。

【问题讨论】：

您的代码示例过于复杂，有许多不相关的 div 和包装器，我们不知道您对以下类有什么规则：'col-md-3'、'service-box' 和 'row '。话虽如此，您可以尝试使用基于 % 的值而不是 px
@MichaelB Hii，我使用 col-md-3 因为我将拥有其中四个...黑色方块是图像，白色圆圈是包含图标的圆圈，然后我们每个盒子都有标题..此外，代码工作正常，唯一的问题是当涉及到移动设备和桌子时..圆圈向上或向下移动但它不会停留在图像和外部之间的中心（标题）

标签： html twitter-bootstrap css less

【解决方案1】：

如果您将service-circle 元素移动到service-bg 中，则可以使用transform: translate 对齐它

.service-box {
background: red;
}
    .service-bg {
        position: relative;               /*  added */
        height: 250px;
        border:1px solid black;
    }
        img{
            height: 100%;
        }

    .service-circle{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        color: #000;
        background: #fff;
        position: absolute;
        left: 50%;                          /*  added  */
        top: 100%;                          /*  added  */
        transform: translate(-50%,-50%);    /*  added  */
        border: 5px solid #e6ab43;
    }

    .service-text {
        text-align: center;
        margin-top: 80px;                   /*  changed */
    }

<div class="row">
  <div class="col-md-3">
    <div class="service-box">
      <div class="service-bg" style="background-color:  black;">
        <!--  Insert img-->

      <div class="service-circle">
        <!--Add icon inside circle -->

      </div>
    </div>

      <div class="service-text">
        <h3>
          ENTER TITLE

        </h3>
      </div>
    </div>

  </div>
  <div class="col-md-3">


  </div>
  <div class="col-md-3">


  </div>
  <div class="col-md-3">


  </div>

</div>

【讨论】：

感谢您的回答...但是您的圆圈在黑色背景内，它应该在黑色和红色背景之间的线上...再次，我发布的图像意味着代码可以正常工作...唯一的问题是当它在移动设备中时..圆圈不合适，我不想使用@media，因为那样我将为每个设备添加更多行
你啊！！！啊啊啊！！曼恩！！或女人..不确定.. l o l jee，但非常感谢你！！！
@ArielMaduro 更新了我的答案。除非您知道图像的确切高度，否则您无法将该圆圈与该位置的现有标记一起定位。通过执行我的建议，无论如何它都会起作用....而且我是个绅士:)
非常感谢！