Как вывести текст поверх полупрозрачного div с помощью CSS?

Question

Я видел много вопросов о том, как вымыть текст с помощью CSS, но все ответы до сих пор предполагают, что элемент под текстом имеет сплошной фон. Как бы вы исчезли из текста, если текст находится поверх div, который имеет непрозрачность менее 1 (т. Е. Полупрозрачный)? Выполните приведенный ниже код, чтобы увидеть пример. То, что я пытаюсь сделать, - это вымыть текст в этом поле в вертикальном градиенте, чтобы цвет шрифта был белым вверху и исчезал в полупрозрачном фоне коробки, когда он достиг дна.

ПРИМЕЧАНИЕ. Решение должно работать без изменений, даже если изменяется непрозрачность фона div (например, 0.75 вместо 0.5).

body { 
 
    background: #333; 
 
    color: #fff; 
 
} 
 

 
.box { 
 
    width: 320px; 
 
    background: rgba(204, 153, 153, 0.5); 
 
    border: 2px solid #000; 
 
    padding: 1rem; 
 
} 
 

 
.box > p { 
 
    margin: 0; 
 
}

<div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>

Answer 1

Я, наконец, нашел решение, отвечающее всем моим требованиям, добавив только одну строку CSS в .box > p: -webkit-mask-image (принятый ответ Адриана ван Влиета). Я обновил код, чтобы показать это решение: http://codepen.io/thdoan/pen/wKZBrN

Несмотря на то, что это считается «нестандартным» CSS, для моего случая это не имеет большого значения, поскольку если браузер его не поддерживает, тогда контент будет грациозно снижаться до белого текста, просто не имеющего градиента. Тем временем, я экспериментирую с другим решением, которое является более кроссбрауширующим с использованием SVG: Applying SVG effects to HTML content. Я буду обновлять этот ответ с помощью кодекса, используя маску SVG, если я когда-нибудь ее заработаю.

Спасибо всем, кто ответил :-).

UPDATE: Вот решение с использованием SVG: http://codepen.io/thdoan/pen/rObVdJ

Полное решение кросс-браузер выложен в хорошем учебнике CSS Masks – How To Use Masking In CSS Now Кристиан Шефер.

Answer 2

Если вы просто хотите всегда текст прозрачны вы можете использовать значение цвета RGBA. Если последнее значение, альфа контролирует непрозрачность текста от 0 до 1

.box > p { 
color: rgba(255, 255, 255, .5); 
} 

или если вы хотите перейти

Если вы хотите, чтобы изменить его на парении

.box > p { 
color: rgba(255, 255, 255, .5); 
} 
.box > p:hover { 
color: rgba(255, 255, 255, 1); 
} 

Редактировать : вы хотели, чтобы он был прозрачным? Я нашел пример этого, http://output.jsbin.com/iwepas/3/

По существу вам просто нужно что-то сложить над ним и дать ему градиентный цвет от прозрачного до непрозрачного. В этом примере используется псевдоним ::after.

.box > p { 
    position: relative; 
} 

.box > p::after { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    content: ""; 
    background: linear-gradient(to top, 
    rgba(127, 102, 102,1) 10%, 
    rgba(127, 102, 102, 0) 80% 
); 
    pointer-events: none; /* so the text is still selectable */ 
} 

Answer 3

вы можете играть с микс-Блен режиме и фона Градиент здесь то, что я пришел для текста градиента DEMO

UPDATE
я иметь место бело-прозрачный градиент над р размытый вниз часть текста NEW DEMO

body { 
 
    background: #333; 
 
    color: #fff; 
 
    font-size: 22px; 
 
} 
 
.box { 
 
    width: 520px; 
 
    height:210px; 
 
    border: 2px solid #000; 
 
    padding: 1rem; 
 
    background: rgba(204, 153, 153, 0.5); 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
p { 
 
    color: rgb(255, 255, 255); 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
p::before { 
 
    content: ""; 
 
    width: 520px; 
 
    height: 210px; 
 
    position: absolute; 
 
    background: rgba(204, 153, 153, 0.5) linear-gradient(to bottom, rgba(255, 255, 255, 0) 10%, rgba(150, 120, 120, 0.82) 90%) repeat scroll 0% 0%;

<div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>