从头开始我设法创建了一个带边框的盒子。 这样做时，我还设法将徽标添加到中间。

现在我想添加背景图像，但它总是破坏完整的框。

我的当前结果:

<div style="
float: left; 
  width: 300px; 
  border-radius: 25px;
  border: 2px solid #000000;
  height: 150px;
  position: relative;  
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;">
    <img style="border-radius: 50%; height: 50%;"src="imageURL" />
</div>

带背景图像:

https://jsfiddle.net/2t3a5wvn/

<div style="
float: left; 
  width: 300px; 
  border-radius: 25px;
  border: 2px solid #000000;
  height: 150px;
  position: relative;  
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;">
    <img style="border-radius: 50%; height: 50%;"src="imageURL" />
</div>

预期结果:

顺晟科技：

给你

CSS

<div style="
float: left; 
  width: 300px; 
  border-radius: 25px;
  border: 2px solid #000000;
  height: 150px;
  position: relative;  
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;">
    <img style="border-radius: 50%; height: 50%;"src="imageURL" />
</div>

HTML

<div style="
float: left; 
  width: 300px; 
  border-radius: 25px;
  border: 2px solid #000000;
  height: 150px;
  position: relative;  
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;">
    <img style="border-radius: 50%; height: 50%;"src="imageURL" />
</div>

编辑：这将使布局与图像中的布局相似

您需要转义引号或使用单引号。确保也删除该属性。

<div style="
float: left; 
  width: 300px; 
  border-radius: 25px;
  border: 2px solid #000000;
  height: 150px;
  position: relative;  
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;">
    <img style="border-radius: 50%; height: 50%;"src="imageURL" />
</div>