पूरे वेबपृष्ठ पर धुंध प्रभाव

Question

मैं चाहता हूं कि मेरी वेबसाइट पर अनियंत्रित उपयोगकर्ता, पूरी वेबसाइट के पृष्ठों को धुंध प्रभाव के साथ देखें।

मैं इस धुंध प्रभाव को सीएसएस के साथ कैसे बना सकता हूं?

Answer 1

यहाँ कुछ परिणाम कलंक से तुम्हारा मतलब अगर fuzziness है,:

यह आदमी कॉम्बो में छवि बदलने और अस्पष्टता तकनीकों का उपयोग करता, मुझे पता है कि आपके उपयोगकर्ता एक धुंधली वेबसाइट पर देख रहे हैं, लेकिन अगर कोई आसान समाधान है तो शायद आपके रेगो पृष्ठ का एक स्नैपशॉट लेने और छवि ओवरले तो यह कर सकता है:

http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur

तो आप और आपके रेगो पेज, यह देखते हुए कि यह एक) अक्षम हो सकता है डुप्लिकेट करने का प्रयास करना चाहता था ख) कम से कम, वें शायद आप उपर्युक्त छवि तकनीक का उपयोग करने और इसे CSS positioning और opacity के साथ प्रतियों को ऑफ़सेट करने के लिए भी लागू कर सकते हैं - आईडी zoom आपकी मदद कर सकते हैं। यहां तक ​​कि यदि आपका पृष्ठ पर्याप्त न्यूनतम था, तो यह स्पष्ट रूप से जावास्क्रिप्ट को नोड्स को डुप्लिकेट करने की आवश्यकता होगी, जब तक कि आपका बैकएंड इस नोड डुप्लिकेशन को न कर सके। वास्तव में एक विचार, वास्तव में। यहाँ एक बहुत भयंकर, बहुत जल्दी उदाहरण है:

http://jsfiddle.net/9qnsz/2/

यह इतना पदों सीमाओं और गाऊसी कलंक के साथ कठिनाइयों के कुछ रूपरेखा छवि के साथ जब ऐसा नहीं किया है, और कुछ दिलचस्प लिंक है:

Gaussian Blur onHover Using jQuery

---

संपादित करें: अनुरोध के रूप में, jsfiddle की सामग्री:

<div class="container"> 
    <div class="overlay"> 
     <p>Please register etc etc...</p> 
    </div> 

    <form action="javascript:;" class="form0"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form1"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form2"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form3"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form4"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 

</div>​ 


.container { 
    width:500px; 
    height:500px; 
    position:relative; 
    border:1px solid #CCC; 
} 
    form { 
     position:absolute; 
     left:10px; 
     top:10px; 
    } 
    form.form0 { 
     left:11px; 
     top:11px; 
     opacity:0.1; 
    } 
    form.form1 { 
     left:8px; 
     top:8px; 
     opacity:0.1; 
     zoom:1.02; 
    } 
    form.form2 { 
     left:11px; 
     top:11px; 
     opacity:0.1; 
     zoom:1.01; 
    } 
    form.form3 { 
     left:9px; 
     top:9px; 
     opacity:0.2; 
    } 
    form.form4 { 
     left:11px; 
     top:11px; 
     opacity:0.1; 
    } 

    .overlay { 
     width:250px; 
     height:250px; 
     margin-top:50px; 
     margin-left:auto; 
     margin-right:auto; 
     border:1px solid #666; 
    } 

Answer 2

आप एक निश्चित div अपने body पर 100% चौड़ाई और ऊंचाई पर सेट कर सकते हैं। वह स्क्रीन भर जाएगा और आप उस पर एक अर्ध-पारदर्शी पृष्ठभूमि डाल सकते हैं या जिस प्रभाव को आप ढूंढ रहे हैं उसे बनाने के लिए CSS3 का उपयोग कर सकते हैं।

Answer 3

id="body_bag" के साथ टैग बनाएं और div के भीतर अपनी साइट के संपादन को संपादित करें और धुंध प्रभाव देने के लिए निम्न सीएसएस का उपयोग करें।

#body_bag { 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background: #000; 
    opacity: 0.5; 
    filter: alpha(opacity = 50); /* required for opacity to work in IE */ 
} 

Answer 4

संपादित करें (2015):filter सीएसएस संपत्ति tantalisingly complete coverage बना रही है। यह आपको body { filter: blur(10px); } जैसे नियम लिखने देता है, जो पूरे पृष्ठ को धुंधला करता है।

---

मैं क्या बता सकते हैं, वहाँ भी HTML5, CSS3, आदि के इस "आधुनिक युग" में एक तत्व को धुंधला करने का कोई पार ब्राउज़र तरीका है, से ...

वहाँ IE के लिए एक blur filter है (और केवल आईई)। एक svg blur filter भी applied to an html element हो सकता है लेकिन मैं जो कह सकता हूं उससे, यह केवल फ़ायरफ़ॉक्स में काम करता है।

यदि आप ब्राउज़र-विशिष्ट हैक्स के लिए खुश हैं, तो आगे बढ़ें, लेकिन यदि आपको सभी ब्राउज़रों पर काम करने के प्रभाव की आवश्यकता है तो आप भाग्य से बाहर हैं।

तुम सिर्फ पाठ को धुंधला करना चाहते हैं, तो आप एक चतुर पाठ छाया चाल का उपयोग कर सकते हैं: या तो पारदर्शी ओवरले करके

.blurry { 
    color: transparent; 
    text-shadow: 0 0 3px black; /* set to colour you want */ 
} 

वहाँ भी छवियों को धुंधला करने के तरीके हैं, छवि की प्रतियां स्थानांतरित कर दिया, या processing the data with javascript द्वारा।

शायद आप इन तकनीकों को एक साथ जोड़ सकते हैं, और यह आपके इच्छित चीजों को प्राप्त करेगा।

लेकिन व्यापक जवाब, अफसोस की बात है, इस पल के लिए है: एचटीएमएल में सामान को धुंधला करने का कोई आसान, समग्र तरीका नहीं है।

(मैंने सोचा था कि हम भविष्य में रह रहे थे आदमी देता है क्या ?!?)

परिशिष्ट: आशा दृष्टि में है। लिखने के समय, रात में कुछ वेबकिट ("खून बह रहा किनारा") बनाता है कुछ नए css filter specification को लागू कर रहे हैं। वह डेमो मेरे द्वारा स्थापित किसी भी वेबकिट ब्राउज़र पर काम नहीं करता है, इसलिए यह अभी भी मुख्यधारा से बहुत दूर है।

Answer 5

इस प्रयास करें ...

body { 
    filter:blur(3px); 
} 

आप -webkit- उपसर्गों -moz- जोड़ने (या PrefixFree की तरह कुछ का उपयोग करें) फजी, धुँधली में के रूप में