CSS прозрачный вопрос радиального градиента - PullRequest
Новая
       8

CSS прозрачный вопрос радиального градиента

0 голосов
/ 05 июля 2018

Я новичок в CSS-градиентах и ​​пытаюсь овладеть им, я пытаюсь применить прозрачный белый градиент CSS, чтобы окружить границы кругового делителя фоновым изображением. К сожалению, эффект, который я получаю, не тот, который мне нужен, как я могу сделать так, чтобы градиент казался менее размытым, а градиент не таким широким, как хотелось бы, я хочу, чтобы он влиял только на границы изображение, примерно 30 пикселей в глубину от внешнего кольца.

Мой код: 

.transparent-gradient::after {
  content: "";
  background-image: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  }
  .transparent-gradient{
  width:300px; height:300px; margin:20px 0px; align-self:center;position:relative; overflow:hidden; background-color:red;border-radius:50%; background-size:cover; background-position:center; background-image:url('https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80');
  }
<div class="transparent-gradient" style=""></div>

1 Ответ

0 голосов
/ 05 июля 2018 

.transparent-gradient::after {
  content: "";
  background: radial-gradient(ellipse at center, rgba(255,255,255,0) 40%,rgba(255,255,255,.9) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.transparent-gradient{
  width:300px; 
  height:300px; 
  margin:20px 0px; 
  align-self:center;
  position:relative; 
  overflow:hidden; 
  background-color:red;
  border-radius:50%; 
  background-size:cover; 
  background-position:center; 
  background-image:url('https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80');
}
<div class="transparent-gradient" style=""></div>

С rgba(255,255,255,0) 40% 40% указывает « размер ». С rgba(255,255,255,.9) 100% .9 вы делаете белый менее твердым (непрозрачность / альфа из rgb A ). 1 полностью белый .5 равен white с непрозрачностью 50%.

...