你可以用两种不同的技术实现一个透明的切出圆:
1.SVG
使用mask元素:
body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
有一个路径元素:
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
svg{
display:block;
width:70%;
height:auto;
margin:0 auto;
}
path{
transition:fill .5s;
fill:#E3DFD2;
}
path:hover{
fill:pink;
}
在这种情况下使用SVG的主要优点是:
>较短的代码
>您可以轻松使用图像或渐变填充圆形蒙版
>保持形状的边界并且仅在相对于掩模的填充上触发鼠标事件(在示例中悬停透明的切出圆圈)
2. CSS只使用Box-SHADOWS
创建一个div with overflow:hidden;和一个圆形伪元素在其内与border-radius。给它一个巨大的盒子阴影,没有背景:
div{
position:relative;
width:500px; height:200px;
margin:0 auto;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
left:175px; top:25px;
border-radius:100%;
width:150px; height:150px;
Box-shadow: 0px 0px 0px 2000px #E3DFD2;
}
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
浏览器对Box-shadows的支持是IE9,见canIuse
同样的方法是使用border而不是Box-shadows。这是有趣的,如果你需要支持不支持像IE8的Box-shadows的borowsers。该技术是相同的,但你需要补偿的顶部和左侧的值,以保持圆在div的中心:
body{
background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
background-size:cover;
}
div{
position:relative;
width:500px; height:200px;
margin:0 auto;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
left:-325px; top:-475px;
border-radius:100%;
width:150px; height:150px;
border:500px solid #E3DFD2;
}