div로 CSS를 블렌딩

CSS3로 div를 흐리게 처리 할 수 있습니까? 그리고 나는 자바 스크립트 덩어리가 아니라 포토샵이 흐려진다는 것을 의미합니다.div로 CSS를 블렌딩

div의 가장자리가 흐리게 보이지 않게하려면 div의 내용을 흐리게 처리하고 싶습니다. (브라우저에서 너무 많이 묻는 것이 맞습니까?)

가능하지 않은 경우 어떤 좋은 해결 방법이 있습니까?

2010-12-18 Utkarsh Sinha

즉 필터를 사용할 수 있습니다. http://msdn.microsoft.com/en-us/library/ms532979(VS.85).aspx 캔버스를 사용하는 다른 브라우저의 경우 사용할 수 있습니다. – Zevan

SVG 필터로 가능합니다.

기본 사항은 단지 feGaussianBlur입니다.

는 여기있다 : 이것은 파이어 폭스 4에서 작동하고, (나는 그것이 3.6에서 작동해야한다고 생각) 네임 스페이스/XMLNS 물건없이 svg 요소를 사용하여 문제를 제외하고 3.5에서 작동합니다 http://jsfiddle.net/aXUtU/1/

유입되는 공간과 관련하여 몇 가지 문제가 있습니다. 이 텍스트를 한 줄로 가져 가면 특히 마지막 부분이 잘리는 것을 볼 수 있습니다.

유사한 효과를 얻을 수 box-shadow의 (inset 및 초기)와 text-shadow를, 콘텐츠에 따라 여러 조합. 위의 링크는 텍스트에 유사한 효과를 달성하기위한 시작점을 포함합니다.

출처

2010-12-18 10:48:04

파이어 폭스에서는 * 단지 * 작동한다고 언급 할 가치가있다. (내 크롬은 렌더링하지 않았으므로 다른 사람들도 그렇게하지 않을 것이라고 생각한다.) 그러므로 결국 그다지 해결책이 아니다. – jolt

@Tom : 브라우저 지원은 잘 모르겠지만 여전히 Firefox라고 생각했습니다. SVG를 사용하는 방법은 다소 복잡합니다. 예 : background-image는 현대의 모든 브라우저에서 SVG와 함께 작동합니다 (저는 FF 4를 현대와 3.6으로 분류하지 않습니다). 또는 문서의 실제 섹션이 SVG에서 수행 된 경우 작동합니다. @Utkarsh : SVG 필터는 아마도 브라우저 지원 때문에 당신이 필요로하는 것을하지 않을 것입니다, 그러나'box-shadow' +'text-shadow' 제안은 이미지가 포함되지 않는다면 제공해야합니다. 데모를 약간의 예제로 업데이트하겠습니다. –

그는 CSS가 아니지만 대안을 찾고 있습니다. – Rob

음 ... 나는이 함께했다 :

.blur { 
    color: transparent; 
    text-shadow: 0px 0px 2px #000000; 
}

이 확실히 텍스트가 흐릿하게 만들 것입니다! 텍스트가 흐릿하게 만 만들뿐입니다. 영향을받은 이미지가 없습니다. 하지만 이걸로 http://plugins.jquery.com/project/blurimage과 함께하면 더 강력하게 만들 수 있다고 생각합니다!

실험을 즐기십시오!

출처

2010-12-18 15:05:52 jolt

div로 CSS를 블렌딩

답변

관련 문제