Подскажите, как реализовать что б фон задаваемый body радиально уходил в прозрачность ?
html{
height: 100%;
width: 100%;
}
body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #fff url("http://www.placecage.com/c/1000/600") 50% 50% no-repeat;
}
svg{
display:block;
width:100%;
height:100vh;
}
<svg viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin slice">
<defs>
<radialGradient id="gradient" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff" stop-opacity="1" />
<stop offset="50%" stop-color="#fff" stop-opacity="0.5" />
<stop offset="100%" stop-color="#fff" stop-opacity="0" />
</radialGradient>
<mask id="mask">
<rect x="0" y="0" width="1000" height="600" fill="url(#gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="1000" height="600" mask="url(#mask)" />
</svg>
Не могу понять почему он закрашивает в чёрный цвет, и как увеличить радиус этого градиента, что б переход был чётче выражен ?
html
-элемента с фоном изcss background
то советую всё-таки воспользоватьсяcss mask
из моего ответа на ваш предыдущий вопрос ru.stackoverflow.com/a/850940/275019 . Изменяя параметры радиального градиента в маске можно добиться более резкого перехода, например:-webkit-mask:radial-gradient(circle at center,transparent 20% ,black 60%);