블러 배경 - Jquery/Pure CSS/Image?

전체 화면 표지 이미지와이 표지 이미지 위에있는 콘텐츠가 포함 된 2 div 블록이있는 페이지를 만들어야합니다.블러 배경 - Jquery/Pure CSS/Image?

는

블록은 약간 회색 배경을 흐리게 효과가해야 할 DIV - 야후 날씨 앱

(https://www.google.co.uk/search?client=firefox-a&hs=xQa&rls=org.mozilla:en-US:official&channel=fflb&q=yahoo+weather+design+blur&bav=on.2,or.r_qf.&bvm=bv.47883778,d.d2k&biw=1484&bih=770&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540)에 의해

만 사용 효과와 유사한 오히려 전체 배경을 흐리게보다 나는 단지 오버레이 필요 div 배경을 흐리게 처리하는 것이 아니라 전체 작업보다 두통이 심합니다.

누구나 비슷한 결과를 얻을 수 있었습니까? 아니면 Jquery/Pure Css 또는 콤보를 통해 가능하면 가능합니까?

출처

2013-06-17 Dancer

예. 포토샵을 사용하여 불투명도가 50 % 인 그래디언트 이미지를 만들었습니다. 1px 폭의 PNG로 만들어 내 최고의 div의 배경에 걸쳐 펼쳤다. 그럼에도 불구하고 그것은 자주색 배경의 약간의 그라디언트를 가졌지 만 페이지 배경은 여전히 그것을 통해 볼 수있었습니다. 적어도, 내가 한 일과 내가 어떻게했는지 생각할 수있는 가장 가까운 것. – SpYk3HH

나의 유일한 제안은이 경우에 도움이되는지 확신 할 수는 없지만 Z- 인덱스를 사용하는 것입니다. – j0hnstew

@ SpYk3HH 현대적인 브라우저에서 별도의 이미지를 사용할 이유가 없습니다. IE6조차도 부분 투명도가있는 단색 배경을 렌더링 할 수있는 능력이있었습니다. – Pointy

도움이 될지 모르겠지만 흐림 효과가 있습니다. 비슷한 질문이 여기에 질문을 받았다 :

Background blur with CSS

개발자는 흐림 효과를주기 위해 SVG 블러를 사용했다.

도움이 될지 모르겠다.

출처

2013-06-17 13:09:18

이것은 [링크 전용 답변] (http://meta.stackexchange.com/q/8259)입니다. 귀하의 링크에 대한 컨텍스트를 추가하십시오. – Doorknob

죄송합니다. 분명히해야합니다. –

원하는 작업을 수행한다고 주장하는 blur.js이라는 jQuery 플러그인이 있습니다. 그래도 그것을 확인하지 않았습니다.

출처

2013-06-17 13:15:32

이것은 [링크 전용 답변] (http://meta.stackexchange.com/q/8259)입니다. 귀하의 링크에 대한 컨텍스트를 추가하십시오. – Doorknob

@Doorknob 때로는 우리가 필요로하는 모든 것이 링크입니다. 감사합니다. Wojciech Budniak –

아마도 css3 필터를 사용할 수 있습니다 : blur() 속성을 사용하면 이미지가 흐려 지지만 배경 이미지는 배경 요소와 동일 (동일한 위치에 있음)해야합니다. 흐리게 처리 된 요소가 추가하려는 내용 (: 앞에)과 분리되어 있는지 확인해야합니다. 그렇지 않으면 내용이 흐려지기 때문입니다. 필터 속성을 사용하여 채도 및 기타 요소를 변경할 수 있습니다.

출처

2013-06-17 14:06:33

방금이 방법을 알아 냈습니다! 배경과 내용 div는 모두 동일한 위치/크기로 동일한 배경을 가져야합니다. 둘 다에 background-attachment: fixed을 사용하십시오. -webkit-filter: blur(5px);으로 div를 흐리게 처리 할 수 있습니다. 페이지의 다른 위치에 따라 Z- 색인을 사용해야 할 수도 있습니다. 또한 흐리게 처리 된 div 내부의 내용을 원하면 완전히 분리 된 div에 있어야합니다. 그렇지 않으면 내부의 모든 내용이 흐려집니다. 여기 코드는 다음과 같습니다

<body style="margin: 0px;"> 
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;"> 
    <div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;"> 
    <div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px); position: absolute;"> 

    </div> 
    </div> 
    <div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;"> 
     <p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p> 
    </div> 
</div> 
</body>

나는 누군가가 굉장하다고 할 수 있다면, 그래서이 작동 할 jsfiddle 얻을 couldnt한다. 여기서 모든 아이디어는 div가 모두 동일한 장소에서 동일한 내용을 가지고 있다는 것입니다. 그런 식으로 흐린 div가 움직이더라도 배경이 흐릿하게 보입니다.

출처

2013-10-06 20:44:28

불행히도, 오늘의 브라우저 지원은 매우 제한적입니다. 예 : 모든 IE 버전과 Edge는 필터를 사용할 수 없습니다. –

블러 배경 - Jquery/Pure CSS/Image?

답변

관련 문제