[英]How to make the image transparent around the circle
我正在嘗試制作一個圖像裁剪彈出窗口,其中包裝器中有一個球體。 我的目標是使圖像對包裝器透明,除了包裝器內部的球體。
HTML
<div class="wrapper">
<figure>
<img src="https://iso.500px.com/wp-content/uploads/2016/01/andre_cover.jpg"/>
</figure>
</div>
CSS
.wrapper{
height: 300px;
background-color: red;
position: relative;
}
figure{
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0;
background-color: #fff;
margin: 0 auto;
}
figure img{
opacity: 0.5;
position: absolute;
left: 0;
max-height: 100%;
}
任何幫助,將不勝感激。
檢查以下哪個是您的預期輸出。
img { mask: url(#masking); }
<svg> <defs> <linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%"> <stop stop-color="black" offset="0"/> <stop stop-color="white" offset="1"/> </linearGradient> <mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> <rect y="0.3" width="1" height=".7" fill="url(#gradient)" /> <circle cx=".5" cy=".5" r=".35" fill="white" /> </mask> </defs> </svg> <img src="https://iso.500px.com/wp-content/uploads/2016/01/andre_cover.jpg" width="568">
第二種解決方案:
使用div,您可以按照以下方式進行操作。
* { margin: 0; padding:0; } div{ position:relative; width:450px; height:300px; overflow:hidden; left:0; } div:after{ content:''; position:absolute; left:155px; top:25px; border-radius:50%; width:150px; height:150px; box-shadow: 0px 0px 0px 1000px rgba(255,255,255,0.5); } body{background: url('https://iso.500px.com/wp-content/uploads/2016/01/andre_cover.jpg');background-size:450px; background-repeat: no-repeat;}
<div></div>
編輯2:
如果您不想要背景,則將圖像放在里面。
<div>
<img src="https://iso.500px.com/wp-content/uploads/2016/01/andre_cover.jpg" width="450px" />
</div>
您可以嘗試掩蓋它,在這里看看: https : //webkit.org/blog/181/css-masks/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.