그래디언트처럼 투명하게 이미지를 바꿉니다.

투명하게 변하는 이미지 (배경 이미지)를 사용하여 그 뒤쪽에있는 내용을 실제로 볼 수 있습니다 (간신히 투명 함 덕분에).그래디언트처럼 투명하게 이미지를 바꿉니다.

분명히 PNG 이미지로 구현할 수 있지만 그래픽 디자이너에게 이미지를 변경할 때마다 시작점을 바꾸고 싶습니다. => 투명도 점 중지 (어쩌면 더 많은 색상을 원하거나 어쩌면 원하는가?) 더 적은 컬러와 더 많은 투명성).

CSS3에서도 동일한 효과를 얻을 수 있습니까? jpg (와 png)에서 투명도 그라디언트를 적용 해 보았습니다. 그러나 PNG가 이미 투명도 (기본적으로 그라데이션)가 없으면 이미 볼 수 없습니다 (CSS 그라데이션을 쓸모 없게 만듭니다).

의견이 있으십니까? 나는 웹을 통해 열심히 파고 있지만 올바른 키워드를 사용하지 않거나 가능하지 않은 것처럼 보입니다.

업데이트 1 :

코드는 단어를 많이보다라고,이 같은 일을하고 싶은 (그러나 구문은 분명히 잘못이다)의

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));

출처

2013-10-31 Fire-Dragon-DoL

"마스킹"을 검색해야합니다. 그래도 크로스 브라우저에서 작동하도록하려면 과감한 노력을 기울여야합니다. – vals

오, 귀하의 제안은 정말 좋았습니다. 나는 적절한 키워드를 찾는 것이 아니 었습니다. 웹 주위에서 약간 확인하고 있습니다. IE10 +/chrome 마지막 버전/firefox 마지막 버전 만 지원하는 것이 좋습니다. 문제가 있다면 분명히 사용할 수 없습니다. –

완전한 재 작성을 내 이전의 대답, 나는 겉으로는 완전히 완전히 그 질문을 오해했기 때문에.

이 원하는 경우

enter image description here

당신은이 작업을 수행 할 수 있습니다

<html> 
 
    <style type='text/css'> 
 
    div, img { position:absolute; top:0; left:0; width:250px; height:250px; } 
 
    img { 
 
     -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) 
 
    } 
 
    </style> 
 
    <body> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div> 
 
    <img src='http://verysmartbrothas.com/images/random.jpg?9fe95b' /> 
 
    </body> 
 
</html>

업데이트 1

다른 브라우저에서이 작업을 수행하려는 경우 쉽지는 않습니다. Firefox에는 SVG가 필요하고 IE에는 많은 어려움이 필요합니다.

이미지 컨테이너 사업부에 대한

http://jsfiddle.net/yw9v7zm5/

.CSS 사용 :

출처

2013-10-31 18:51:07 bishop

그래,하지만 이런 식으로, 이미지가 투명하지 않을거야, 내가 틀렸어? 따라서 #under div 뒤에 몇 개의 텍스트가 있으면 이미지를 통해 볼 수 없습니다. 이전에 이와 비슷한 것을 테스트 중이었습니다. –

올바른 이미지는 투명하지 않습니다. #under의 뒤쪽에 텍스트가있는 경우 (자연 스택 순서를 가정하여) 처리됩니다. z- 인덱스를 사용하면이 문제를 해결할 수 있습니다. 내 대답에 업데이트를 게시하고 있습니다. – bishop

문제는 내가 이미지 뒤에 희미 해지는 텍스트가 필요하다는 것입니다. 그것이 내 주된 목적입니다. –

방금 (이 경우 흰색) 배경 색상에 페이드하려면 여기에 작업 예제를 참조

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1))); 
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0);

출처

2015-04-06 04:00:24

이 솔루션은 BrowserStack을 사용하여 테스트 할 수있는 모든 IE/FF/Chrome/Safari에서 작동합니다! – ZedTuX

그래디언트처럼 투명하게 이미지를 바꿉니다.

답변

관련 문제