CSS для наложения градиента только с левой стороны - PullRequest
Новая
       24

CSS для наложения градиента только с левой стороны

0 голосов
/ 03 марта 2020

Я пытаюсь показать наложение белого градиента только с левой стороны. Градиент лайнера, слева направо. Где только левая сторона белая, а правая сторона прозрачная. Это возможно с css?

Ответы [ 3 ]

1 голос
/ 04 марта 2020

попробуйте это 

background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);

выполнив это, вы устанавливаете прозрачный белый градиент цвета на странице слева направо

0 голосов
/ 04 марта 2020

Это возможно в CSS, см. Этот фрагмент кода, например: 

body {
  background-color: #9999ff;
}

.bg-demo {
  background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
<div class="bg-demo">
  <p>Don't mind me I'm just a very long text, like veeeery long ! I know I'm long right ? I know y'all know better my cousin Lorem Ipsum but hey ! Is he that long ? I don't think so ! Like I said, I am so long you probably won't ever find something as long as me.</p>
  <p>So anyways what is like being long ? It is much like being tall except on a much different axis. Also instead of growing up I am basically "longging left", right ? Just in case that wasn't obvious, I just did a joke, a short one. Yeah sure, that is quite interesting to have a short joke for a text as long as me</p>
</div

У моего целого body синий фон, но у моего .bg-demo div есть линейный градиент, начинающийся слева и переходящий от белого к прозрачному.

0 голосов
/ 04 марта 2020

Вы можете попробовать что-то вроде этого. 

background: rgba(255, 255, 255, 1);

background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);

background: -webkit-gradient(left top, right top, color-stop(50%, rgba(255, 255, 255, 1)), color-stop(72%, rgba(246, 246, 246, 0.9)), color-stop(100%, rgba(237, 237, 237, 0.78)));

background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);

background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);

background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);

background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1);
...