Question

我使用以下代码尝试裁剪圆形而不是椭圆形，但是徒劳无功。代码，https://jsfiddle.net/Debra321/432574uc/98/

代码段，

.circle{
width: 70px;
height: 70px;
position: relative;
border: 2px solid white;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
overflow:hidden;
}

我需要的效果：将背景图像裁剪成一个真实的圆圈。

我尝试了什么：使用代码，我可以正确裁剪圆形图像，但因为我需要可见的边框，所以我放弃了这个解决方案。

.circle{
position:absolute;
width:80px;
height:80px;
top:-2%;
background:#0cc;
-webkit-clip-path:circle(40% at center);
border-width:3px;
border-color:white;
}

错误的效果（左）＆amp;正确的效果（右）

代码结构的一部分来自Trying to circular crop image with HTML and CSS。

裁剪图像是flexbox中项目的背景。任何反馈都表示赞赏;谢谢。

我的HTML代码，

<div id="phoneContent">
   <div class="colContainer">
       <div class="circle"> 
       </div>
            <h3>
             ONE
            </h3>
       <div>
           <h1>
           TWO
           </h1>
       </div>
       <div>
           <h1>
           THREE
           </h1>
       </div>
       <div>
           <h1>
           FOUR
           </h1>
       </div>

</div>

</div>
</div>

和css，

html {
  box-sizing: border-box;
}
body {
  background: #fcfca4;
  background: linear-gradient(to top right, #F3E9D2, #EC9192);
  background-repeat: no-repeat;
  background-attachment: fixed;
  position:relative;
}
#phoneContent{
    position: absolute;
    top:17.7%;
    left:50px;
    width:253px;
    height:455px;
    display:block;
    margin:auto; 
    overflow: auto;   

}
#phoneContent .colContainer{
   width:100%;
   height:100%;
   display: flex;
   top:15%;
   flex-direction: column;
   position: absolute;
}
.colContainer >  div{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.circle{
width: 70px;
height: 70px;
position: relative;
border: 2px solid white;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
overflow:hidden;
}

.colContainer >  div:nth-child(1) {
background:url("http://gdurl.com/hZIP") no-repeat -120px,0;
background-size:cover;
filter: brightness(50%);
position:relative;
background-repeat: no-repeat;
background-color:black;
}

Answer 1

它不起作用，因为你试图设置一个高度为flexbox，这不是他们所做的。我已快速修复了您的代码：https://jsfiddle.net/432574uc/101/

（在小提琴中评论此代码）

.colContainer >  div{/*
  flex: 1;
  display: flex;
  flex-direction: column;*/
}

无法将图像裁剪成真实的圆圈

1 个答案: