CSS3 फ़िल्टर ब्लर के साथ परिभाषित किनारे

Question

मैं इस कोड के साथ कुछ छवियों को धुंधला कर रहा हूं

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

छवि के किनारों को धुंधला हो जाता है, हालांकि। किनारों को परिभाषित करते समय क्या छवि को धुंधला करना संभव है? इनसेट ब्लर या कुछ और जैसा?

Answer 1

आप इसे एक <div>साथ रख सकते हैं overflow: hidden;और सेट कर <img>सकते हैं margin: -5px -10px -10px -5px;।

डेमो:

उत्पादन

सीएसएस

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}
​

एचटीएमएल

<div><img src="http://placekitten.com/300" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>​​​​​​​​​​​​

Comments

@ मेरे लिए यह क्रोम 23 / OS X में काम नहीं करता है। मुझे लगता है marginकि आवश्यकता है।

— सोच 18

@ मैपी क्योंकि imgअंदर है divऔर यह blurसीमाओं को ओवरफ्लो कर रहा है div। overflow: hidden;यह कटौती।

— सोच

JSFiddle के नीचे कबाड़ के साथ क्या है? मैं देख रहा हूँ क्यों नहीं जीए पर नज़र रखने के एक JSFiddle आवश्यक है ...

— Bojangles

@Bojangles, jsfiddle में तस्वीर के नीचे "जंक" छवि में ही है ।

— uberdog

क्या पृष्ठभूमि छवि के लिए ऐसा करने का कोई तरीका है? इस पर पाठ के साथ एक धुंधली पृष्ठभूमि छवि बनाने का विचार है

— गाइ

Answer 2

मैं इस काम को करने में सक्षम था

transform: scale(1.03);

संपत्ति छवि पर लागू होती है। किसी कारण से, क्रोम पर, प्रदान किए गए अन्य समाधान काम नहीं करेंगे यदि कोई अपेक्षाकृत तैनात मूल तत्व है।

Http://jsfiddle.net/ud5ya7jt/ की जाँच करें

इस तरह से छवि को 3% से थोड़ा ज़ूम किया जाएगा और किनारों को क्रॉप किया जाएगा जो कि वैसे भी धुंधली छवि पर कोई समस्या नहीं होनी चाहिए। इसने मेरे मामले में अच्छा काम किया क्योंकि मैं पृष्ठभूमि के रूप में एक उच्च रेस छवि का उपयोग कर रहा था। सौभाग्य!

Comments

यह अच्छा और सरल और समायोज्य है। यह पूरी तरह से मेरी स्थिति के लिए काम करता है jsfiddle.net/ud5ya7jt/28 जबकि कुछ अन्य समाधान अब विफल होते दिख रहे हैं।

— जेनी

इसके लिए आपका बहुत-बहुत धन्यवाद, ठीक वही है जो मैं ढूंढ रहा था :)

— jeerbl

पेरेंट को सेट करने overflow: hiddenसे स्क्रॉलबार हट जाएगा! धन्यवाद!

— डिमोग्राम

इतना सरल उपाय!

— 13:

स्केल (1) काम करता है, लेकिन 1.03 इतना है कि हम छवि को 3% तक

— काटते हैं

Answer 3

मैंने -webkit-transform: translate3d(0, 0, 0);साथ उपयोग किया overflow:hidden;।

DOM:

<div class="parent">
    <img class="child" src="http://placekitten.com/100" />
</div>

सीएसएस:

.parent {
    width: 100px;
    height: 100px;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
}
.child {
    -webkit-filter: blur(10px);
}

डेमो: http://jsfiddle.net/DA5L4/18/

यह टेक्निक Chrome34 और iOS7.1 पर काम करता है

अपडेट करें

http://jsfiddle.net/DA5L4/50/

यदि आप Chrome के नवीनतम संस्करण का उपयोग करते हैं, तो आपको -webkit-transform: translate3d(0, 0, 0);हैक का उपयोग करने की आवश्यकता नहीं है । लेकिन यह सफारी (वेबकिट) पर काम नहीं करता है।

Comments

@ रज़वान क्रेसेलारू वास्तव में? सफारी के किस संस्करण में आपने मेरे डेमो की जाँच की? यह मैक सफारी 7 में काम करता है

— GeckoTang

मेरे लिए काम किया! धन्यवाद! (क्रोमियम 50.0.2661.86 (64-बिट) OSX)

— iperdiscount

Answer 4

आप पूरा वीडियो भी रख सकते हैं, आपको कुछ दूर नहीं करना है।
आप सफेद-धुंधले किनारों पर इनसेट छाया ओवरले कर सकते हैं।

यह वास्तव में अच्छा लग रहा है :)

बस इस कोड को अपने वीडियो के जनक पर चिपकाएँ:

.parent {
    -webkit-box-shadow: inset 0 0 200px #000000;
       -moz-box-shadow: inset 0 0 200px #000000;
            box-shadow: inset 0 0 200px #000000;
}

Comments

एक इलाज करता है, अन्य सुझावों में से किसी ने भी मदद नहीं की।

— डीजीबब्स

मेरे मामले में, इसने मदद की, लेकिन यह अभी भी कुछ अवांछित धुंधला छोड़ रहा था, इसलिए मैंने एक अतिरिक्त बॉक्स शैडो लेयर जोड़ा:box-shadow: inset 0 0 200px #000000, inset 0 0 200px #000000;

— falsarella

Answer 5

कई स्थितियों में जहां IMG को स्थिति बनाई जा सकती है : निरपेक्ष , आप धुंधले किनारों को छिपाने के लिए क्लिप का उपयोग कर सकते हैं - और बाहरी DIV अनावश्यक है।

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    position: absolute;
    clip: rect(5px,295px,295px;5px);
}

Comments

caniuse.com/#feat=css-clip-path यहां क्लिपिंग के लिए ब्राउज़र का समर्थन है। आईई सबसे अच्छा is

— फिलिप गिउलियानी

Answer 6

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

कुंजी एक कंटेनर में छवि को रखने के लिए है, और ट्रांसफ़ॉर्म करने के लिए: उस कंटेनर को इसके अतिप्रवाह से छुपाना: छिपे हुए माता-पिता। फिर, धब्बा कंटेनर के अंदर, बजाय कंटेनर पर ही लागू हो जाता है।

काम कर रहे बेला: https://jsfiddle.net/x2c6txk2/

एचटीएमएल

<div class="container">
    <div class="img-holder">
        <img src="https://unsplash.it/500/300/?random">
    </div>
</div>

सीएसएस

.container {
    width    : 90%;
    height   : 400px;
    margin   : 50px 5%;
    overflow : hidden;
    position : relative;
}

.img-holder {
    position  : absolute;
    left      : 0;
    top       : 0;
    bottom    : 0;
    right     : 0;
    transform : scale(1.2, 1.2);
}

.img-holder img {
    width          : 100%;
    height         : 100%;
    -webkit-filter : blur(15px);
    -moz-filter    : blur(15px);
    filter         : blur(15px);
}

Answer 7

उस स्वीकृत उत्तर के लिए कुछ संकेत, यदि आप स्थिति का पूर्ण उपयोग कर रहे हैं, तो नकारात्मक मार्जिन काम नहीं करेगा, लेकिन आप अभी भी ऊपर, नीचे, बाएँ और दाएँ एक नकारात्मक मान सेट कर सकते हैं, और मूल तत्व को अतिप्रवाह छिपा सकते हैं।

यदि आप छवि का आकार नहीं जानते हैं, तो पूर्ण छवि में क्लिप जोड़ने के बारे में उत्तर में एक समस्या है।

Answer 8

एक के साथ position: relative;और अंदर छवि डालेंoverflow: hidden;

एचटीएमएल

<div><img src="#"></div>

सीएसएस

div {
    position: relative;
    overflow: hidden;
}
img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
}

यह डायनामिक डिविज़ की तरह वैरिएबल साइज़ एलिमेंट्स पर भी काम करता है।

Answer 9

आप छवि को क्लिप करके किनारों को ओवरलैप करने से रोक सकते हैं और एक आवरण तत्व को लागू कर सकते हैं जो ब्लर प्रभाव को 0 पिक्सेल पर सेट करता है। यह इस तरह दिखता है:

एचटीएमएल

<div id="wrapper">
  <div id="image"></div>
</div>

सीएसएस

#wrapper {
  width: 1024px;
  height: 768px;

  border: 1px solid black;

  // 'blur(0px)' will prevent the wrapped image
  // from overlapping the border
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}

#wrapper #image {
  width: 1024px;
  height: 768px;

  background-image: url("../images/cats.jpg");
  background-size: cover;

  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);

  // Position 'absolute' is needed for clipping
  position: absolute;
  clip: rect(0px, 1024px, 768px, 0px);
}

Answer 10

सबसे सरल तरीका बस उस div पर एक पारदर्शी बॉर्डर जोड़ना है जिसमें छवि शामिल है और अपनी डिस्प्ले प्रॉपर्टी को इनलाइन-ब्लॉक में इस तरह सेट करना है:

सीएसएस:

div{
margin: 2rem;
height: 100vh;
overflow: hidden;
display: inline-block;
border: 1px solid #00000000;
}

img {
-webkit-filter: blur(2rem);
filter: blur(2rem);
}

एचटीएमएल

<div><img src='https://images.unsplash.com/photo-1557853197-aefb550b6fdc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80' /></div>

यहाँ एक कोडपेन दिखाया गया है: https://codepen.io/arnavozil/pen/ExPYKNZ

Answer 11

आप किसी अन्य तत्व पर सीमा जोड़ने का प्रयास कर सकते हैं:

DOM:

<div><img src="#" /></div>

सीएसएस:

div {
   border: 1px solid black;
}
img {
    filter: blur(5px);
}

Answer 12

मैंने पाया कि, मेरे मामले में, मुझे एक आवरण नहीं जोड़ना था।

मैंने अभी जोड़ा -

margin: -1px;

या

margin: 1px; // any non-zero margin
overflow: hidden;

मेरा धुंधला तत्व बिल्कुल तैनात था।

Comments

volkerotto.net/2014/07/03/…

— मैरी पियरोज़्किविज़

Answer 13

यहाँ एक समाधान है जिसकी मैं छवि रखता हूँ और 100% फसल की आवश्यकता नहीं है:

मूल रूप से मैं 3x3 ग्रिड में छवि को दर्पण करता हूं, फिर सब कुछ धुंधला कर देता हूं और फिर केंद्र छवि को प्रभावी ढंग से एक दोहराए जाने वाले किनारों की तरह ज़ूम करता है जब प्रभाव में धुंधला हो जाता है, तो यह थोड़ा अजीब है कि css3 में बनाए गए दोहराने किनारों की तरह नहीं है।

विधि / कोड से लिंक करें : बिना किसी फसल या किनारों को सीएसएस 3 का उपयोग करके एक छवि को कैसे धुंधला करें?

Comments

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक हिस्सों को यहां शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं।

— अर्नोन ज़िल्का

खैर हाँ अजीब है कि आप कहते हैं कि कारण मैं सिर्फ उस पोस्ट और शीर्षक को अद्यतन किया है और यह पूरी तरह से लिंक यहाँ एक्स गड़बड़)

— पेट्रीक Fröhler

Answer 14

यदि आप पृष्ठभूमि छवि का उपयोग कर रहे हैं, तो सबसे अच्छा तरीका मुझे मिल रहा है:

filter: blur(5px);
margin-top: -5px;
padding-bottom: 10px;
margin-left: -5px;
padding-right: 10px;