끝에 텍스트를 그라디언트 배경으로 페이드 아웃하는 방법은 무엇입니까?

Question

이미 배경 이미지로 요소가 있습니다. 가능하면이 텍스트가 결국 사라집니다. example

배경 이미지에 이미 그라데이션이 있고 배경에 수정하지 않고 텍스트가 투명해야 문제가 생깁니다.

Answer 1

http://jsfiddle.net/Ff9JL/에 코드를 사용하십시오. 이것은 당신이 찾고있는 것 같습니다. li : CSS 코드를 살펴보십시오.

background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 
background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 

Answer 2

당신은 이미 다른 이미지를 가지고 있기 때문에 당신이 background-image을 수정하지 않는 것을 말한다. CSS3에서는 multiple backgrounds을 사용할 수 있습니다. 당신이 정말 그 background-image을 수정하지 않으려면

, 당신은 그 :after의 background-image을 수정할 수 :

Demo

p { 
    position: relative; 
    line-height: 1.25em; 
} 
p:after{ 
    background-image: linear-gradient(to left, #fff, rgba(255,255,255,0)); 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    height: 1.25em; 
    content: ''; 
}