Question

我在Chrome中遇到了一些小问题。

我尝试div border-radius，background-image，border和overflow:hidden。

在这个div中是某种必须被掩盖的叠加层。通过父div的overflow:hidden和border-radius属性。

这样可行，但我在叠加div和父div的background-image之间看到了border的精细边框。

有解决方法吗？

＆＃13;

body{
  background-color:black;
  }

.circle{
  background-image: url('http://www.augustaga.gov/images/pages/N1617/Black%20tupelo%20-%20photo%201.jpg');
  
  width: 250px;
  height: 250px;
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 2px solid white;
  overflow:hidden;
  
  
}
.overlay{
  top: 150px;
  position: absolute;
  height : 100px;
  width: 100%;
  background-color:white;
  text-align: center;
  
}

＆＃13;

<div class="circle">
  <div class="overlay"> text</div>
</div>

＆＃13;

Answer 1

尝试将background-clip: padding-box;添加到.circle类

-webkit-background-clip: padding-box; 
-moz-background-clip:    padding; 
background-clip:         padding-box;

Source

Answer 2

请试试这个：

你需要删除边框：2px纯白色; 形式.circle class。

所以它应该是：

.circle{
  background-image: url('http://www.augustaga.gov/images/pages/N1617/Black%20tupelo%20-%20photo%201.jpg');
  width: 250px;
  height: 250px;
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  /* border: 2px solid white; */
  overflow: hidden;
}

带有背景图片的毛刺行为div，Chrome中的边框半径

2 个答案: