Как сделать изображение прозрачным вокруг круга

Я пытаюсь сделать всплывающее изображение обрезки, где в оболочке есть сфера. Моя цель - сделать изображение прозрачным для обертки, кроме сферы внутри обертки.Как сделать изображение прозрачным вокруг круга

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%; 
}

Demo

Любая помощь будет оценена.

источник

2016-02-16 Benjamin

Посмотрите здесь: http://stackoverflow.com/questions/10038668/css-js-for-circular-cropping-of-an-image –

Или решение здесь : http://jsfiddle.net/13u5z2mg/3/ –

Каков ваш ожидаемый результат? – ketan

Проверьте следующее, которое ваш ожидаемый результат.

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">

Reference link

Второе решение:

Использование 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; \t background-repeat: no-repeat;}

<div></div>

Fiddle link

Edit 2:

Если вы не хотите фон затем поместить изображение внутри отдавания.

<div> 
<img src="https://iso.500px.com/wp-content/uploads/2016/01/andre_cover.jpg" width="450px" /> 
</div>

New Fiddle

источник

2016-02-16 10:10:27 ketan

Не работает с Chrome 48. Однако работает хорошо с Firefox. –

второе решение работает в хроме 48 – Schubie

Вторым решением для меня является. Есть ли какие-либо возможности, которые можно сделать без фонового изображения? – Benjamin

Вы могли бы попытаться замаскировать его, посмотрите здесь: https://webkit.org/blog/181/css-masks/

источник

2016-02-16 08:11:34

Полагаю, вы неправильно поняли мой вопрос. Я хотел показать изображение прозрачным, кроме частей в сфере. – Benjamin

В этом случае используйте маску прозрачности для этих областей, однако она еще не поддерживается глубоко в браузерах. –

Вы можете использовать 2 изображения, один прозрачный, а другой - только сфера, наложенная туда, где вы хотите ... –

Как сделать изображение прозрачным вокруг круга

ответ

Смежные вопросы