ओवरले के लिए मैं CSS ग्लास / ब्लर इफेक्ट काम कैसे कर सकता हूं?

Question

मुझे अर्ध-पारदर्शी ओवरले डिव पर एक धब्बा प्रभाव लागू करने में समस्या हो रही है। मैं div के पीछे सब कुछ चाहूँगा धुंधला हो, इस तरह से:

यहाँ एक jsfiddle है जो काम नहीं करता है: http://jsfiddle.net/u2y2091z/

किसी भी विचार कैसे यह काम करने के लिए? मैं इसे यथासंभव सरल रखना चाहूंगा और इसे क्रॉस-ब्राउज़र किया जा सकता है। यहाँ CSS मैं उपयोग कर रहा हूँ:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

Comments

FYI करें - CSS filterफ़ायरफ़ॉक्स पर समर्थित नहीं है, आपको इसका उपयोग नहीं करना चाहिए।

— बुनसी

हो सकता है कि डिव को अपारदर्शी बनाएं लेकिन छवि के साथ एक छद्म तत्व का उपयोग करें क्योंकि यह पृष्ठभूमि है जो स्वतंत्र रूप से धुंधली हो सकती है।

— bjb568

@ ChipChatalog.py CSS फ़िल्टर डिफ़ॉल्ट रूप से FF35 + में समर्थित हैं। लेकिन मैं आपसे सहमत हूँ, हम डेवलपर्स के रूप में इस पर भरोसा नहीं करना चाहिए क्योंकि यह एक क्रॉस ब्राउज़र सुविधा नहीं है।

— हशेम क़ोलमी

CSS फ़िल्टर अब अधिकांश प्रमुख ब्राउज़रों में समर्थित हैं।

— एरिक रीड

Answer 1

अधिक सरल और अद्यतित उत्तर के लिए:

backdrop-filter: blur(6px);

नोट ब्राउज़र समर्थन सही नहीं है, लेकिन ज्यादातर मामलों में एक धब्बा गैर-आवश्यक होगा।

Comments

यह अब तक का सबसे अच्छा जवाब है।

— टेनर ब्यूरो

Answer 2

यहाँ एक उदाहरण है जो svgफ़िल्टर का उपयोग करता है ।

विचार एक svgतत्व का उपयोग करना है और heightउसी पर फ़िल्टर #overlayलागू feGaussianblurकरना है। यह फ़िल्टर एक svg imageतत्व पर लगाया जाता है। इसे एक extruded प्रभाव देने के लिए, आप box-shadowओवरले के निचले भाग में उपयोग कर सकते हैं ।

svgफ़िल्टर के लिए ब्राउज़र समर्थन ।

Demo on Codepen

body {
  background: #222222;
}
#container {
  position: relative;
  width: 450px;
  margin: 0 auto;
}
img {
  height: 300px;
}
#overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  color: rgba(130, 130, 130, 0.5);
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

<div id="container">
  <img src="http://lorempixel.com/450/300/sports" />
  <div id="overlay">WET</div>
  <svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;">
    <defs>
      <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
      </filter>
    </defs>
    <image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" />
  </svg>
</div>

Answer 3

मैं यहां और आगे की Googling से सभी की जानकारी एक साथ साझा करने में सक्षम था, और मैं निम्नलिखित के साथ आया जो क्रोम और फ़ायरफ़ॉक्स में काम करता है: http://jsfiddle.net/xtbmpcsu/ । मैं अभी भी IE और ओपेरा के लिए यह काम करने पर काम कर रहा हूँ।

कुंजी उस div के अंदर की सामग्री डाल रही है जिसमें फ़िल्टर लगाया गया है:

<div id="mask">
    <p>Lorem ipsum ...</p>
    <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

और फिर सीएसएस:

body {
    background: #300000;
    background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
    color: white;
}
#mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
}
img {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    position: absolute;
    left: 100px;
    top: 100px;
    height: 300px;
    width: auto;
}

इसलिए मास्क में फ़िल्टर लगाए गए हैं। इसके अलावा, <svg>मान के लिए एक टैग के साथ एक फिल्टर के लिए url () के उपयोग पर ध्यान दें - यह विचार http://codepen.io/AmeliaBR/pen/xGuBr से आया है । यदि आप अपने CSS को छोटा करने के लिए होते हैं, तो आपको SVG फ़िल्टर मार्कअप में किसी भी स्थान को "% 20" के साथ बदलने की आवश्यकता हो सकती है।

तो अब, मुखौटा div के अंदर सब कुछ धुंधला है।

Comments

यह बहुत चालाक है

— गंगासार स्वपुरबा

क्रोम को फाइनल पसंद नहीं है filter: url(...। निकालें और Chrome सफलतापूर्वक उपयोग करता है filter: blur(10px);।

— डग एस

क्या मुझे गलतफहमी हुई? यह ओपी नहीं चाहता है। ग्रंथों को धुंधला नहीं होना चाहिए।

— एरिक

@Eric, आप स्पष्ट रूप से नहीं समझ पाते, के बाद से उत्तर देने है ओ पी।

— ताओ

Answer 4

यदि आप आज एक विश्वसनीय क्रॉस-ब्राउज़र दृष्टिकोण की तलाश कर रहे हैं , तो आपको बहुत अच्छा नहीं मिलेगा। आपके पास सबसे अच्छा विकल्प दो छवियां बनाना है (यह कुछ वातावरणों में स्वचालित हो सकता है), और उन्हें ऐसे व्यवस्थित करें कि एक दूसरे को ओवरले करता है। मैंने नीचे एक सरल उदाहरण बनाया है:

<figure class="js">
    <img src="http://i.imgur.com/3oenmve.png" />
    <img src="http://i.imgur.com/3oenmve.png?1" class="blur" />
</figure>

figure.js {
    position: relative;
    width: 250px; height: 250px;
}

figure.js .blur {
    top: 0; left: 0;
    position: absolute;
    clip: rect( 0, 250px, 125px, 0 );
}

हालांकि प्रभावी, यहां तक ​​कि यह दृष्टिकोण भी आदर्श नहीं है। यह कहा जा रहा है, यह वांछित परिणाम देता है ।

Answer 5

यहाँ एक संभावित समाधान है।

एचटीएमएल

<img id="source" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />

<div id="crop">
    <img id="overlay" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

सीएसएस

#crop {
    overflow: hidden;

    position: absolute;
    left: 100px;
    top: 100px;

    width: 450px;
    height: 150px;
}

#overlay {
    -webkit-filter:blur(4px);
    filter:blur(4px);

    width: 450px;
}

#source {
    height: 300px;
    width: auto;
    position: absolute;
    left: 100px;
    top: 100px;
}

मुझे पता है कि सीएसएस को सरल बनाया जा सकता है और आपको आईडी से छुटकारा पाना चाहिए। यहाँ विचार एक div का उपयोग क्रॉपिंग कंटेनर के रूप में करना है और फिर इमेज के डुप्लिकेट पर कलंक लगाना है। बेला

फ़ायरफ़ॉक्स में यह काम करने के लिए, आपको एसवीजी हैक का उपयोग करना होगा ।

Comments

@ chipChatalog.py मुझे लगता है कि आपको उस स्थिति में SVG हैक का उपयोग करने की आवश्यकता है, फिर demosthenes.info/blog/534/Crossbrowser-Image-Blur ।

— जुहो वेप्सलीनन

ध्यान दें कि CSS फ़िल्टर के लिए, आप -webkit-उन ब्राउज़रों में लागू नहीं होने के अलावा अन्य विक्रेता उपसर्गों को छोड़ सकते हैं । मानक घोषणा को अंत में रखना बेहतर है - सभी उपसर्ग संस्करणों के बाद।

— हाशम क़ोलमी

@ हशमेकुल्लामी किया। धन्यवाद।

— जुहो वेपसैलीन

एफएफ ठीक है, अब (54.0.1 (32-बिट))। बिलकुल उत्तम! टीएक्स!

— पेड्रो फेरेरा

Answer 6

background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);

अपनी सामग्री में एक और धब्बा पृष्ठभूमि जोड़ने के बजाय, आप पृष्ठभूमि-फ़िल्टर का उपयोग कर सकते हैं । FYI IE 11 और फ़ायरफ़ॉक्स इसका समर्थन नहीं कर सकते हैं। कैनीज़ की जाँच करें ।

डेमो:

header {
  position: fixed;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
}
body {
  margin: 0;
}

<header>
  Header
</header>
<div>
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
</div>

Comments

एक ही समाधान पहले से ही प्रस्तावित किया गया है: stackoverflow.com/a/58083568/3702797

— काइदो

Answer 7

#bg, #search-bg {
  background-image: url('https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
  background-repeat: no-repeat;
  background-size: 1080px auto;
}

#bg {
  background-position: center top;
  padding: 70px 90px 120px 90px;
}

#search-container {
  position: relative;
}

#search-bg {
  /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 99;

  /* Pull the background 70px higher to the same place as #bg's */
  background-position: center -70px;

  -webkit-filter: blur(10px);
  filter: url('/media/blur.svg#blur');
  filter: blur(10px);
}

#search {
  /* Put this on top of the blurred layer */
  position: relative;
  z-index: 100;
  padding: 20px;
  background: rgb(34,34,34); /* for IE */
  background: rgba(34,34,34,0.75);
}

@media (max-width: 600px ) {
  #bg { padding: 10px; }
  #search-bg { background-position: center -10px; }
}

#search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; }
#search h2 { margin-bottom: 50px }
#search h5 { margin-top: 70px }

<div id="bg">
  <div id="search-container">
    <div id="search-bg"></div>
    <div id="search">
      <h2>Awesome</h2>
      <h5><a href="#">How it works »</a></h5>
    </div>
  </div>
</div>

Answer 8

मैं इस समाधान के साथ आया था।

धुंधली प्रभाव की छवि देखने के लिए क्लिक करें

यह एक तरह की चाल है जो बिल्कुल तैनात बच्चे का उपयोग करता है div, अपनी पृष्ठभूमि छवि को माता div- पिता के समान सेट करता है और फिर background-attachment:fixedसीएसएस संपत्ति का उपयोग backgroundमूल तत्व पर समान गुणों के साथ करता है।

फिर आप filter:blur(10px)चाइल्ड डिव पर आवेदन (या कोई भी मूल्य) करते हैं।

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.background{
    position: relative;
    width:100%;
    height:100vh;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
}

.blur{
    position: absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    filter:blur(10px);
    transition:filter .5s ease;
    backface-visibility: hidden;
}

.background:hover .blur{
    filter:blur(0);
}
.text{
    display: inline-block;
    font-family: sans-serif;
    color:white;
    font-weight: 600;
    text-align: center;
    position: relative;
    left:25%;
    top:50%;
    transform:translate(-50%,-50%);
}

<head>
    <title>Blurry Effect</title>
</head>
<body>
    <div class="background">
        <div class="blur"></div>
        <h1 class="text">This is the <br>blurry side</h1>
    </div>
</body>
</html>

कोडपेन पर देखें

Answer 9

यहां एक समाधान है जो निश्चित पृष्ठभूमि के साथ काम करता है, यदि आपके पास एक निश्चित पृष्ठभूमि है और आपके पास कुछ ओवरलेड तत्व हैं और आपको उनके लिए ब्लर बैकग्राउंड की आवश्यकता है, तो यह समाधान काम करता है:

छवि हमारे पास यह सरल HTML है:

<body> <!-- or any wrapper -->
   <div class="content">Some Texts</div>
</body>

<body>या रैपर तत्व के लिए एक निश्चित पृष्ठभूमि :

body {
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

और यहाँ उदाहरण के लिए हमारे पास एक सफेद पारदर्शी पृष्ठभूमि के साथ एक उपरिशायी तत्व है:

.content {
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
}

अब हमें अपने ओवरले तत्वों के लिए अपने रैपर की ठीक उसी पृष्ठभूमि वाली छवि का भी उपयोग करने की आवश्यकता है, मैं इसे :beforeपीडो-क्लास के रूप में उपयोग करता हूं :

.content:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(5px);
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

चूँकि फिक्स्ड बैकग्राउंड रैपर और ओवरलेड एलिमेंट्स दोनों में एक ही तरह से काम करता है, हमारे पास ओवरले एलिमेंट के बिल्कुल एक ही स्क्रॉल पोजीशन में बैकग्राउंड होता है और हम इसे ब्लर कर सकते हैं। यहाँ फ़ायरफ़ॉक्स, क्रोम, ओपेरा और एज में परीक्षण किया गया एक वर्किंग फ़िडेल है: https://jsfiddle.net/0vL2rc4d/

नोट: फ़ायरफ़ॉक्स में एक बग होता है जो स्क्रॉल करते समय स्क्रीन को झिलमिलाहट करता है और निश्चित धुंधला बैकग्राउंड होता है। अगर कोई ठीक है, मुझे बताएं

Answer 10

यह सामग्री के ऊपर धब्बा ओवरले करेगा:

.blur{
 display:block;
 bottom: 0;
 left: 0;
 position: fixed;
 right: 0;
 top: 0;
 -webkit-backdrop-filter: blur(15px);
 backdrop-filter: blur(15px);
 background-color: rgba(0, 0, 0, .5);
}