Fade от текста на крае контейнера в ПРОЗРАЧНЫЙ

Question

Я боюсь, что я уже знаю ответ на этот вопрос, но просто чтобы быть уверенным:

Есть ли способ, чтобы исчезнуть из перелива текста на крае контейнера без имея сплошной цвет за этим контейнером?

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

Однако, вот что я хотел бы сделать:

Как вы можете видеть, у меня нет сплошного цвета, так что здесь не вариант.

Любые предложения?

Answer 1

Может быть, Подход будет использовать This, но это работает только для -webkit-:

.container { 
 
    width: 800px; 
 
    height: 400px; 
 
    background: url('http://lorempixel.com/400/800/city'); 
 
    position: relative; 
 
} 
 
.container div { 
 
    font-size: 17px; 
 
    font-family: 'verdana'; 
 
    background: rgba(0, 0, 0, .3); 
 
    width: 30%; 
 
    height: 80%; 
 
    position: absolute; 
 
    left: 10%; 
 
    top: 10%; 
 
    color: white; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
} 
 
.container div span { 
 
    display: block; 
 
    background: -webkit-linear-gradient(#fff, transparent); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<div class="container"> 
 
    <div> 
 
    <span>Suspendisse potenti. Fusce nec volutpat nibh. Aenean molestie pharetra augue eget tristique. Aenean pellentesque est sed nunc tincidunt vulputate. Nullam sed consectetur erat. Morbi quis condimentum nisl, eget tempor nulla. Donec nec aliquam erat. </span> 
 
    </div> 
 
</div>

Answer 2

вы можете обернуть нижнюю текст в span и изменить color к rgb с opacity

body { 
 
    background: url(http://placeimg.com/640/480/any); 
 
} 
 
p { 
 
    width: 220px; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 20px; 
 
    color: white; 
 
} 
 
p span:nth-of-type(1) { 
 
    color: rgba(255, 255, 255, 0.8); 
 
} 
 
p span:nth-of-type(2) { 
 
    color: rgba(255, 255, 255, 0.5); 
 
} 
 
p span:nth-of-type(3) { 
 
    color: rgba(255, 255, 255, 0.2); 
 
} 
 
p span:nth-of-type(4) { 
 
    color: rgba(255, 255, 255, 0.0); 
 
}

<p>penatibus et magnis dis parturient 
 
    <br>montes, nascetur ridiculus mus. 
 
    <br>Donec quam felis, ultricies nec, 
 
    <br>pellentesque eu, penatibus et 
 
    <br>magnis dis parturient montes, 
 
    <br>nascetur ridiculus mus. Donec 
 
    <br>quam felis, ultricies nec nec, 
 
    <br><span>pelpenat penatlen eu, penatibusf,</span> 
 
    <br> <span>pelpenat penatlen eu, penatibusf,</span> 
 
    <br> <span>pelpenat penatlen eu, penatibusf,</span> 
 
    <span>pelpenat penatlen eu, penatibusf,</span> 
 

 
    <br> 
 
</p>