0

Подскажите, как реализовать что б фон задаваемый 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>

Не могу понять почему он закрашивает в чёрный цвет, и как увеличить радиус этого градиента, что б переход был чётче выражен ?

2
  • 1
    Если вы хотите радиальную прозрачность именно для html-элемента с фоном из css background то советую всё-таки воспользоваться css mask из моего ответа на ваш предыдущий вопрос ru.stackoverflow.com/a/850940/275019 . Изменяя параметры радиального градиента в маске можно добиться более резкого перехода, например: -webkit-mask:radial-gradient(circle at center,transparent 20% ,black 60%);
    – zhurof
    14 июл 2018 в 19:17
  • 1
    А в чёрный цвет закрашивается потому, что в svg нарисован чёрный прямоугольник. и к нему применена svg-маска радиальной прозрачности.
    – zhurof
    14 июл 2018 в 19:20

1 ответ 1

2

В крайнем случае можно абсолютно спозиционировать картинку с svg-маской относительно блока (в вашем случае - <body>). Ссылка на картинку задаётся в атрибуте xlink:href тега <image>. Ещё способ: сохранить тег <svg> вместе с его содержимым в файл .svg и затем задать его в качестве фона для html-элемента. Более кроссбраузерных способов сделать такую маску я не знаю.

*{
  box-sizing:border-box;
}

body{
  margin:0;
  position:relative;
  min-height:100vh;
  transition:all .3s ease-out;
  padding:15px;
  color:#fff;
  font-weight:bold;
  font-size:20px;
  font-family:sans-serif;
  text-shadow:0 0 5px black;
}
body:hover{
  background-color:#cda;
}
.body-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}
<svg class="body-bg" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid slice">
  <defs>
    <radialGradient id="gradient" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="rgba(0,0,0,0)" />
      <stop offset="100%" stop-color="#fff" />
    </radialGradient>
    <mask id="mask">
      <rect x="0" y="0" width="1000" height="500" fill="url(#gradient)" />
    </mask>
  </defs>
  <image preserveAspectRatio="xMidYMid slice" xlink:href="http://www.placecage.com/c/1000/600" x="0" y="0" width="1000" height="500" mask="url(#mask)" />
</svg>
<p>Настоящего актера и шизофреника разделяет лишь тонкая грань. <br/>© Николас Кейдж</p>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.