बैकग्राउंड इमेज के लिए CSS फ़िल्टर कैसे लागू करें

Question

मेरे पास एक JPEG फाइल है जिसे मैं एक खोज पृष्ठ के लिए पृष्ठभूमि छवि के रूप में उपयोग कर रहा हूं, और मैं इसे सेट करने के लिए CSS का उपयोग कर रहा हूं क्योंकि मैं Backbone.js संदर्भों के भीतर काम कर रहा हूं :

background-image: url("whatever.jpg");

मैं केवल बैकग्राउंड में CSS 3 ब्लर फ़िल्टर लागू करना चाहता हूं , लेकिन मुझे यकीन नहीं है कि केवल एक तत्व को कैसे स्टाइल किया जाए। अगर मैं कोशिश करूँ:

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

background-imageमेरे सीएसएस के नीचे , यह सिर्फ पृष्ठभूमि के बजाय पूरे पृष्ठ को स्टाइल करता है। वहाँ सिर्फ छवि का चयन करें और उस पर फ़िल्टर लागू करने का एक तरीका है? वैकल्पिक रूप से, क्या पृष्ठ पर हर दूसरे तत्व के लिए केवल धब्बा बंद करने का एक तरीका है?

Comments

केवल एक छवि का एक हिस्सा धुंधला करें: codepen.io/vsync/pen/gjMEWm

— vsync

Answer 1

इस पेन को देखें ।

आपको दो अलग-अलग कंटेनरों का उपयोग करना होगा, एक पृष्ठभूमि छवि के लिए और दूसरा आपकी सामग्री के लिए।

उदाहरण में, मैंने दो कंटेनर बनाए हैं, .background-imageऔर .content।

दोनों को साथ रखा गया position: fixedऔर left: 0; right: 0;। उन्हें प्रदर्शित करने का अंतर उन z-indexमूल्यों से आता है जो तत्वों के लिए अलग-अलग निर्धारित किए गए हैं।

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
    rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
    quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
    tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

लोरम इप्सम पाठ के लिए क्षमा याचना ।

अपडेट करें

Http://codepen.io/akademy/pen/FlkzB का उपयोग करके एक बेहतर कार्यान्वयन के लिए मैथ्यू विलकोक्सन के लिए धन्यवाद.content:before

Comments

यह करने के लिए थोड़ा बेहतर तरीका यह है कि इसका उपयोग करें। कॉनस्टेंट: अतिरिक्त "पृष्ठभूमि-छवि" मार्कअप के बजाय। मैंने यहां पेन अपडेट किया: codepen.io/akademy/pen/FlkzB

— मैथ्यू विलकॉक्सन

fwiw, केवल Webkit ने इस सुविधा को लागू किया है, और वहां केवल विक्रेता उपसर्ग के साथ है, इसलिए ms-, o-, moz- उपसर्ग बेकार हैं।

— जॉन z

यह फ़ायरफ़ॉक्स 35.0 और बाद में डिफ़ॉल्ट रूप से समर्थित है: caniuse.com/#feat=css-filters

— मिको रानाल्टैनेन

JF ने FF 35 में अपडेट किया, और यह उपसर्ग के बिना काम कर रहा है

— आमिर महमूद

@EdwardBlack मुझे नहीं लगता कि यह एक समस्या है, लेकिन एक स्थायी धुंधला होने के लिए, आपको छवि संपादन टूल का सहारा लेना होगा। दूसरा तरीका हो सकता है कि किसी प्रकार की इमेज कैप्चर करने के लिए phantomJS / headless webkit ब्राउज़र का उपयोग करें और फिर उसकी सेवा करें, लेकिन यह एक ही परिणाम प्राप्त करने का एक थकाऊ तरीका है।

— अनिकेत

Answer 2

कलम

अन्य समाधानों की तरह निश्चित / निरपेक्ष होने के बजाय दस्तावेज़ प्रवाह के भीतर सामग्री को फिट बनाने के साथ-साथ एक अतिरिक्त तत्व की आवश्यकता को समाप्त करना।

का उपयोग कर प्राप्त किया

.content {
  overflow: auto;
  position: relative;
}

ओवरफ्लो ऑटो की जरूरत है, अन्यथा शीर्ष पर कुछ पिक्सेल द्वारा पृष्ठभूमि को ऑफसेट किया जाएगा।

इसके बाद आपको बस जरूरत है

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

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

संपादित करें यदि आप किनारों पर सफेद सीमाओं को हटाने में रुचि रखते हैं, तो एक चौड़ाई और ऊंचाई 110%और एक बाईं और ऊपर का उपयोग करें -5%। यह आपके बैकग्राउंड को एक उभार देगा - लेकिन किनारों से कोई ठोस रंग का रक्तस्राव नहीं होना चाहिए।

अपडेटेड पेन यहां: https://codepen.io/anon/pen/QgyewB - सुझाव के लिए धन्यवाद चाड फॉसेट।

Comments

इसके साथ सीमा यह है कि आप js में छद्म तत्वों में हेरफेर नहीं कर सकते हैं। अगर आपको जरूरत नहीं है, तो यह एक अच्छा समाधान है।

— प्रयोगशालाओं

आप धुंधला सफेद सीमा पसंद नहीं है आप को बढ़ा सकते हैं widthऔर heightकरने के लिए 110%और फिर जोड़ने के एक ऑफसेट -5%करने के लिए topऔर leftके content:beforeवर्ग।

— चाड फॉसेट

यह मेरे लिए काम कर रहा है, लेकिन मैं चाहता हूं कि जब पृष्ठ स्क्रॉल हो जाए तो पृष्ठभूमि की छवि भी स्क्रॉल हो जाए। FIXED स्थिति वह रोक रही है। इस मुद्दे से कैसे छुटकारा पाएं?

— डेपन कुमार

Answer 3

जैसा कि अन्य जवाबों में कहा गया है, इसे निम्न प्रकार से प्राप्त किया जा सकता है:

• पृष्ठभूमि के रूप में धुंधली छवि की एक प्रति।
• एक छद्म तत्व जिसे फ़िल्टर किया जा सकता है फिर सामग्री के पीछे तैनात किया जाता है।

आप भी उपयोग कर सकते हैं backdrop-filter

एक समर्थित संपत्ति है जिसे कहा जाता है backdrop-filter, और यह वर्तमान में Chrome 76, एज , सफारी और iOS सफारी में समर्थित है ( caniuse.com देखें ) आंकड़ों के लिए )।

से मोज़िला devdocs :

बैकग्राउंड-फिल्टर संपत्ति एक तत्व के पीछे क्षेत्र को धुंधला करने या रंग बदलने जैसे प्रभावों के लिए प्रदान करती है, जिसे तब तत्व की पारदर्शिता / अस्पष्टता को समायोजित करके उस तत्व के माध्यम से देखा जा सकता है।

देखें caniuse.comउपयोग के आँकड़ों के लिए ।

आप इसका उपयोग इस तरह करेंगे:

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

<div class="background background-filter"></div>

अपडेट (12/06/2019) : क्रोमियम backdrop-filter76 संस्करण में डिफ़ॉल्ट रूप से सक्षम के साथ जहाज जाएगा जो 30/07/2019 के कारण है ।

अद्यतन (01/06/2019) : मोजिज़िला फ़ायरफ़ॉक्स टीम ने घोषणा की है कि यह जल्द ही इसे लागू करने पर काम करना शुरू कर देगा।

अद्यतन (21/05/2019) : क्रोमियम की घोषणा केवल backdrop-filter क्रोम कैनरी में "सक्षम प्रायोगिक वेब प्लेटफ़ॉर्म सक्षम करें" ध्वज के बिना उपलब्ध है। यह साधन backdrop-filterसभी क्रोम प्लेटफार्मों पर लागू होने के बहुत करीब है।

Comments

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

— MrMesees

AFAIK यह एक गैर मानक विशेषता है, इसलिए इसके लिए कोई कल्पना नहीं है।

— विटिम।

सचेत! 2018 में इसके लिए ब्राउज़र समर्थन काफी कम हो गया है! एज, फ़ायरफ़ॉक्स, या क्रोम में समर्थित नहीं है।

— protoEvangelion

@protoEvangelion लगता है कि यह एज 16+ में उपलब्ध होगा, और मुझे कोई अन्य ब्राउज़र यह कहते हुए नहीं दिखता है कि वे इसे लागू नहीं करेंगे। इन दावों का समर्थन करने के लिए कोई तथ्य?

— हाईटोडोडेस्ट्रक्ट

@hitautodestruct caniuse.com IE, एज 16, फ़ायरफ़ॉक्स और क्रोम के अनुसार फिलहाल डिफ़ॉल्ट रूप से इसका समर्थन नहीं करते हैं। आप सही हैं कि एज 17+ इसका समर्थन करता है। यह बात बताने के लिए धन्यवाद। हालांकि, कूल जवाब, मुझे यकीन है कि आशा है कि ब्राउज़र इसे लागू करेंगे :)

— protoEvangelion

Answer 4

ऐसा करने के लिए आपको अपने HTML को फिर से तैयार करना होगा। आपको पृष्ठभूमि को धुंधला करने के लिए पूरे तत्व को धुंधला करना होगा। इसलिए यदि आप केवल पृष्ठभूमि को धुंधला करना चाहते हैं, तो इसका अपना तत्व होना चाहिए।

Answer 5

कृपया नीचे दिए गए कोड की जाँच करें: -

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);	
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}

<div class="backgroundImageCVR">
    <div class="background-image"></div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
      <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
    </div>
</div>

Answer 6

निम्नलिखित मैथ्यू विलकोक्सन से समाधान की तरह, शुद्ध सीएसएस में 'पहले' छद्म तत्व के साथ आधुनिक ब्राउज़रों के लिए एक सरल समाधान है।

जावास्क्रिप्ट में छवि और अन्य विशेषताओं को बदलने के लिए छद्म तत्व तक पहुंचने की आवश्यकता से बचने के लिए, बस inheritमूल्य के रूप में उपयोग करें और उन्हें मूल तत्व (यहां body) के माध्यम से एक्सेस करें ।

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

Comments

यह मेरे लिए काम नहीं करता है। क्या आपके पास वर्किंग jsfiddle है?

— मैट

Answer 7

में .contentइसे करने के लिए सीएसएस परिवर्तन में टैब position:absolute। अन्यथा, प्रदान किया गया पृष्ठ स्क्रॉल योग्य नहीं होगा।

Answer 8

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

अंत में समय बचाने के लिए मैं बस अपने पुराने समाधान पर वापस चला गया: मैंने Paint.NET का उपयोग किया और 5 से 10 पिक्सेल के दायरे के साथ गाऊसियन ब्लर, और बस पेज इमेज के रूप में सहेजा गया। :-)

HTML:

<body class="mainbody">
</body

सीएसएस:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

संपादित करें:

मैं अंत में यह काम कर रहा है, लेकिन समाधान कोई सीधा मतलब है! यहाँ देखें:

• फ़िल्टर: ब्लर (1px); फ़ायरफ़ॉक्स, IE और ओपेरा में काम नहीं करता है

Comments

आप 2 imgs डाउनलोड करें

— Ced

Answer 9

आपको वास्तव में "फ़िल्टर" की आवश्यकता है:

blur(«WhatEverYouWantInPixels»);"

body {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

#background {
    background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    /* START */
    /* START */
    /* START */
    /* START */

    /* You can adjust the blur-radius as you'd like */
    filter: blur(3px);
}

<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

Answer 10

बेशक, यह सीएसएस-समाधान नहीं है, लेकिन आप इसके साथ सीडीएन प्रोटॉन का उपयोग कर सकते हैं filter:

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

यह https://developer.wordpress.com/docs/photon/api/#filter से है

Comments

localhostपरीक्षण करते समय इस काम को करने के लिए कोई भी चालाक तरीके ?

— जोनाथन

एक बड़ी रेस इमेज के लिए ब्लर राशि बहुत अधिक सूक्ष्म है, मैं इसे ब्लॉकी दिखने के बिना ब्लर राशि को बहुत अधिक कैसे बढ़ा सकता हूं? चौड़ाई थोड़ी मदद करती है, लेकिन अगर मैं बहुत ज्यादा धुंधला करता हूं तो यह बहुत ज्यादा अवरुद्ध लगता है

— जोनाथन

Answer 11

मैंने यह नहीं लिखा था, लेकिन मैंने देखा कि आंशिक रूप से समर्थित के लिए एक पॉलीफ़िल था backdrop-filter कि CSS SASS कंपाइलर का उपयोग करके , इसलिए यदि आपके पास एक संकलन पाइपलाइन है तो इसे अच्छी तरह से प्राप्त किया जा सकता है (यह टाइपस्क्रिप्ट का उपयोग भी करता है):

https://codepen.io/mixal_bl4/pen/EwPMWo

Answer 12

div {
    background: inherit;
    width: 250px;
    height: 350px;
    position: absolute;
    overflow: hidden;  /* Adding overflow hidden */
}

div:before {
    content: ‘’;
    width: 300px;
    height: 400px;
    background: inherit;
    position: absolute;
    left: -25px;  /* Giving minus -25px left position */
    right: 0;
    top: -25px;   /* Giving minus -25px top position */
    bottom: 0;
    box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3);
    filter: blur(10px);
}

Answer 13

यह उत्तर सामग्री डिज़ाइन के लिए है क्षैतिज कार्ड लेआउट के लिए है जिसमें गतिशील ऊंचाई और एक छवि है।

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

 

व्याख्या

• कार्ड <div>क्लास रैपर के साथ समाहित है , जो एक फ्लेक्सबॉक्स है।
• कार्ड दो तत्वों से बना है, एक छवि जो एक लिंक और सामग्री भी है।
• लिंक <a>, वर्ग लिंक , सापेक्ष स्थित है ।
• लिंक में दो उप-तत्व, एक प्लेसहोल्डर <div>क्लास ब्लर और एक <img>क्लास पिक शामिल हैं जो स्पष्ट छवि है।
• दोनों निरपेक्ष हैं और हैं width: 100%, लेकिन वर्ग चित्र में एक उच्च स्टैक ऑर्डर है, अर्थात,z-index: 2 , जो इसे प्लेसहोल्डर के ऊपर रखता है।
• धुंधला प्लेसहोल्डर के लिए पृष्ठभूमि छवि HTML में इनलाइन शैली के माध्यम से सेट की गई है।

 

कोड

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}

<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>

Answer 14

अब यह सीएसएस GRID का उपयोग करके और भी सरल और अधिक लचीला हो गया है। आपको केवल पाठ (h2) के साथ ब्लर बैकग्राउंड (imgbg) को ओवरलैप करना होगा

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

और सीएसएस:

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

Answer 15

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

Comments

अपने उत्तर में स्पष्टीकरण जोड़ना बहुत अच्छा होगा।

— अरविंद मौर्य

व्हॉट सास मैं अगला कोड डालता हूं, और मैंने शरीर पर सभी वस्तुओं को चित्रित किया है, केवल शरीर की पृष्ठभूमि पर एक छवि रखने के लिए मदद मांग सकता है ????? $ फोंडो: url (/grid/assets/img/backimage.png); {गद्दी: 0; मार्जिन: 0; } शरीर {:: से पहले {सामग्री: ""; ऊंचाई: 1008px; चौड़ाई: 100%; प्रदर्शन: फ्लेक्स; स्थिति: निरपेक्ष; पृष्ठभूमि छवि: $ fondo; बैकग्राउंड-रिपीट: नो-रिपीट; पृष्ठभूमि-स्थिति: केंद्र; पृष्ठभूमि का आकार: कवर; फ़िल्टर: ब्लर (1.6rem); }}

— कार्लोस बोजो

Answer 16

छद्म वर्ग का उपयोग किए बिना से

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}

<body></body>

Answer 17

यदि आप सामग्री को स्क्रॉल करने योग्य बनाना चाहते हैं, तो सामग्री की स्थिति को निरपेक्ष पर सेट करें:

content {
   position: absolute;
   ...
}

मुझे नहीं पता कि यह सिर्फ मेरे लिए था, लेकिन अगर यह ठीक नहीं है!

इसके अलावा के बाद से पृष्ठभूमि तय हो गई है, इसका मतलब है कि आप एक है "लंबन" प्रभाव! तो अब, न केवल इस व्यक्ति ने आपको एक धुँधली पृष्ठभूमि बनाना सिखाया, बल्कि यह एक लंबन पृष्ठभूमि प्रभाव भी है!

Comments

इस सवाल का जवाब नहीं है

— Gorn