具有边框半径的填充与我的图像重叠

Posted 2023-01-30

我遇到的问题是border-darius: 50%;的填充使其图像重叠，它简单地变成了一个圆，中间有一个较小的空圆，但是里面的圆太小，无法容纳图像。看起来是这样的：https://i.stack.imgur.com/tYKfh.png如您所见，图像的角在填充背景下消失了。

代码：https://jsfiddle.net/2w8ahdze/

答案

创建边框半径时只需使用calc方法。

JsFiddle：https://jsfiddle.net/h867qgcL/

.valueelement 
  position:relative;
  border-radius: 50%;
  background-color: #6e4fff;
  height: 80px;
  min-width:80px;
  width:80px;


.valueelement img 
  position: absolute;
  padding:0;
  display:block;
  margin-left:calc(50% - 18px);
  margin-top:calc(50% - 20px);
  height:40px;

<div class="valueelement">
  <img src="https://i.imgur.com/L8JEkBk.png"> </img>
</div>

另一答案

将样式移到父元素，取出填充，并使用flexbox居中：

.valueelement 
    border-radius: 50%;
    background-color: #6e4fff;
    height: 80px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;


.valueelement img
    height: 30px;

<div class="valueelement">
    <img src="https://i.imgur.com/L8JEkBk.png" />
</div>

以上是关于具有边框半径的填充与我的图像重叠的主要内容，如果未能解决你的问题，请参考以下文章

具有边框半径的图像不填充 div [重复]

将导航定位在具有重叠 div 的下标题边框上 (HTML/CSS)

CSS - 我的图像在较小的屏幕尺寸上与我的文本重叠

SVG“填充”与“中风”重叠

查找具有重叠地理点的半径的地理点

图像与主 div 边框重叠