Как правильно расположить радиальный градиент фона? - PullRequest
Новая
       14

Как правильно расположить радиальный градиент фона?

0 голосов
/ 27 мая 2019

У меня небольшая проблема с позицией CSS с этим кодом.

К сожалению, мне нужно, чтобы этот кружок находился с правой стороны страницы (div), а не посередине.Спасибо за ответы 

body{
 margin:0;
 padding:0;
 }
 
 .session-box{
 background:#333;
 width:100%;
 min-height:100vh;
 }
 
 .circle{
 position: absolute;
  top: 0;
  left 0;    
  width: 100%;
  height: 100%;
 background: -moz-radial-gradient(transparent 200px, rgba(255,255,255,0.6) 200px);
  background: -webkit-radial-gradient(transparent 100px , rgba(255,255,255,0.6) 200px ) ;
  background: -ms-radial-gradient(transparent 100px, rgba(255,255,255,0.6) 200px);
  background: -o-radial-gradient(transparent 100px, rgba(255,255,255,0.6) 200px);
  }
<div class="session-box">
  <div class="circle"></div>
</div>

Мне это нужно enter image description here

Ответы [ 2 ]

1 голос
/ 27 мая 2019

вставить circle at calc(100% - 200px) в качестве первого параметра

См .: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient или
https://css -tricks.com / snippets / css / css-radial-градиент / 

body{
 margin:0;
 padding:0;
 }
 
 .session-box{
 background:#333;
 width:100%;
 min-height:100vh;
 }
 
 .circle{
 position: absolute;
  top: 0;
  left 0;    
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at calc(100% - 200px), transparent 100px, rgba(255,255,255,0.6) 200px);
  }
<div class="session-box">
  <div class="circle"></div>
</div>
0 голосов
/ 27 мая 2019

Вот другой синтаксис, если вам нужна лучшая поддержка, чем at ( safari не поддерживает ).Градиент по умолчанию будет расположен в центре, поэтому мы увеличиваем размер фона, чтобы переместить центральное положение вправо. 

body {
  margin: 0;
  padding: 0;
}

.session-box {
  background: #333;
  width: 100%;
  min-height: 100vh;
}

.circle {
  position: absolute;
  top: 0;
  left 0;
  width: 100%;
  height: 100%;
  /* Circle with 100px Radius*/
  background-image: radial-gradient(circle 100px, transparent 50%, rgba(255, 255, 255, 0.6) 100%);
  /* Twice bigger than the container minus 2xRadius */
  background-size: calc(200% - 200px) 100%;
}
<div class="session-box">
  <div class="circle">
  </div>
</div>

Вы также можете сделать это без calc(): 

body {
  margin: 0;
  padding: 0;
}

.session-box {
  background: #333;
  width: 100%;
  min-height: 100vh;
}

.circle {
  position: absolute;
  top: 0;
  left 0;
  width: 100%;
  height: 100%;
  padding-right:100px; /*Equal to radius*/
  /* Circle with 100px Radius*/
  background-image: radial-gradient(circle 100px, transparent 50%, rgba(255, 255, 255, 0.6) 100%);
  /* Twice bigger than the container */
  background-size: 200% 100%;
  background-origin:content-box; /* We don't consider the padding when doing the calculation */
  box-sizing:border-box;
}
<div class="session-box">
  <div class="circle">
  </div>
</div>
...