CSS Непрозрачность градиента сверху вниз без цвета? - PullRequest
Новая
       29

CSS Непрозрачность градиента сверху вниз без цвета?

0 голосов
/ 02 апреля 2020

Я хочу, чтобы у моего div была прозрачность градиента. То, что я мог найти, - это то, как я могу настроить его с помощью цвета. Но что, если я не хочу иметь какой-либо цвет, чтобы элементы внутри стали прозрачными снизу: 

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(41,137,216,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */

Ответы [ 2 ]

1 голос
/ 02 апреля 2020

Это цель mask

.box {
  font-size:35px;
  display:inline-block;
  -webkit-mask:linear-gradient(#fff,transparent);
          mask:linear-gradient(#fff,transparent);
}
<div class="box">
  text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="box" style="color:red;">
  text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="box" style="color:green;">
  text<br>text<br>text<br>text<br>text<br>text<br>
</div>
1 голос
/ 02 апреля 2020

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

.g{
    width: 50vw;
    height: 50vh;
    position: relative;
    display:flex;
    align-items: flex-end;
}

.g::after{
    content: "";
    width: 100%;
    height: 100%;
    position:absolute;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
<div class="g">
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum<br>
    Lorem Ipsum
</div>
...