सीएसएस पृष्ठभूमि-छवि-अस्पष्टता?

Question

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

मैं जानना चाहता हूं कि क्या केवल रंग के बजाय पृष्ठभूमि छवि के अल्फा मान को बदलना संभव है । जाहिर है कि मैं अलग-अलग अल्फा वैल्यू वाली इमेज को सेव कर सकता हूं, लेकिन मैं अल्फा को डायनामिकली एडजस्ट करना चाहूंगा।

अब तक मुझे मिला सबसे अच्छा है:

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

यह काम करता है, लेकिन यह भारी और बदसूरत है, और चीजों को और अधिक जटिल लेआउट में गड़बड़ कर देता है।

Comments

बैकग्राउंड इमेज के पीछे क्या है? एक ठोस रंग, या एक और छवि?

— एरिक

@ एरिक: मैं इसके साथ किसी विशेष मामले का उल्लेख नहीं कर रहा हूं, मैं समस्या का एक सामान्य समाधान खोजने की कोशिश कर रहा हूं।

— नीट द डार्क एबसोल

@ कोलिंक: मैं एक ऐसे परिदृश्य के बारे में सोचने की कोशिश कर रहा हूँ जहाँ पृष्ठभूमि-छवि को लुप्त करना आवश्यक है।

— एरिक

ठीक है, मैं ऑनलाइन ब्राउज़र गेम विकसित करता हूं, और कुछ ऐसी चीजें हैं जो मैं एनिमेशन में करना चाहता हूं जो इस चर-अस्पष्टता पृष्ठभूमि छवि की आवश्यकता होगी।

— नीट द डार्क एबसोल

css-tricks.com/snippets/css/transparent-background-images

— भगवान वार्लिन

Answer 1

यदि पृष्ठभूमि को दोहराना नहीं है, तो आप स्प्राइट तकनीक (स्लाइडिंग-दरवाजे) का उपयोग कर सकते हैं जहां आप सभी छवियों को अलग-अलग अपारदर्शिता के साथ एक (एक दूसरे के बगल में) में डालते हैं और फिर बस उन्हें चारों ओर स्थानांतरित करते हैं background-position।

या आप एक ही आंशिक रूप से पारदर्शी पृष्ठभूमि छवि को एक से अधिक बार घोषित कर सकते हैं, यदि आपका लक्ष्य ब्राउज़र एकाधिक पृष्ठभूमि (फ़ायरफ़ॉक्स 3.6+, सफारी 1.0+, क्रोम 1.3+, ओपेरा 10.5+, इंटरनेट एक्सप्लोरर 9+) का समर्थन करता है। उन कई छवियों की अपारदर्शिता को जोड़ना चाहिए, जितनी अधिक पृष्ठभूमि आप परिभाषित करेंगे।

पारदर्शिता के संयोजन की इस प्रक्रिया को अल्फा ब्लेंडिंग और गणना के रूप में कहा जाता है (धन्यवाद @IainFraser):

αᵣ = α₁ + α₂(1-α₁)जहाँ α0 और 1 के बीच होता है।

Comments

एकाधिक-पृष्ठभूमि तकनीक के लिए एक चेतावनी यह है कि ओपेसिटीज एक साथ जोड़ने के बजाय गुणा करेंगे। यदि आप दो 50% अस्पष्टता छवियों को ओवरले करते हैं, तो परिणाम एक 75% अस्पष्टता छवि होगी। एक और जोड़ें, अपारदर्शिता 87.5%, एक और 93.75% कूदता है। गणितीय रूप से, कुल अपारदर्शिता निकट आती है, लेकिन वास्तव में कभी भी 100% तक नहीं पहुंचती है। हालांकि, राउंडिंग के लिए धन्यवाद, आपको 50% अपारदर्शिता छवि को 100% तक लाने के लिए 9 के ढेर की आवश्यकता होगी।

— इयान फ्रेजर

गणितीय रूप से झुके हुए लोगों के लिए, यहां बताया गया है कि कैसे आप एक अर्ध-पारदर्शी छवि को जोड़ते हैं जो एक स्टैक के साथ समग्र समग्रता के लिए क्या करेगी: stacked_opacity = current_opacity+((1-current_opacity)*single_opacity) इसलिए यदि हमारी वर्तमान अस्पष्टता 0.25 है, तो दूसरी छवि जोड़ने से हमें 0.4375 मिलेंगे; 0.25+((1-0.25)*0.25) = 0.4375 एक और जोड़ना हमें 0.578125 देगा, इस प्रकार; 0.4375+((1-0.4375)*0.25) = 0.578125

— इयान फ्रेजर

Answer 2

आप सीएसएस उत्पन्न सामग्री के साथ फीका पृष्ठभूमि कर सकते हैं

पर डेमो http://jsfiddle.net/gaby/WktFm/508/

एचटीएमएल

<div class="container">
        contents
</div>

सीएसएस

.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

लेकिन आप अस्पष्टता को संशोधित नहीं कर सकते क्योंकि हमें उत्पन्न सामग्री को संशोधित करने की अनुमति नहीं है।

आप इसे कक्षाओं और सीएसएस घटनाओं के साथ जोड़ तोड़ कर सकते हैं ( लेकिन यकीन नहीं है कि यह आपकी आवश्यकताओं के अनुरूप है )

उदाहरण के लिए

.container:hover:before{
    opacity:1;
}

अपडेट करें

आप अस्पष्टता ( फिर से कक्षाओं के माध्यम से ) चेतन करने के लिए सीएसएस संक्रमण का उपयोग कर सकते हैं

http://jsfiddle.net/gaby/WktFm/507/ पर डेमो

जोड़ा जा रहा है

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

करने के लिए .container:beforeनियम एक सेकंड में 1 करने के लिए अस्पष्टता चेतन कर देगा।

अनुकूलता

• एफएफ 5 ( शायद 4 भी है, लेकिन यह स्थापित नहीं है। )
• आईई 9 फेल ।।
• वेबकिट आधारित ब्राउज़र विफल होते हैं ( Chrome अब इसे v26 का समर्थन करता है - शायद पहले के संस्करण भी, लेकिन अभी-अभी मेरे वर्तमान बिल्ड के साथ जाँच की गई ), लेकिन वे जानते हैं और इस पर काम कर रहे हैं ( https://bugs.webkit.org/show_bug.cgi?id= 23209 )

.. तो केवल नवीनतम एफएफ पल के लिए इसका समर्थन करता है .. लेकिन एक अच्छा विचार है, नहीं? :)

Comments

FF5 में मुझे बहुत अच्छा लगता है, अच्छा काम है। मैं पूरी तरह से भूल गया कि छद्म तत्वों के पास urlसंपत्ति है, मैंने उपयोग करके कोशिश की backgroundऔर जेड-इंडेक्स मुद्दों (नीचे सामग्री) को हल नहीं कर सका।

— वेस्ले मर्च जूल

उत्तर की सराहना की, लेकिन यह देखते हुए कि फ़ायरफ़ॉक्स अन्य चीजों के साथ कितना खराब प्रदर्शन करता है (मेमोरी सभी जगह लीक हो जाती है, जेएस में भयानक अंतराल, यह लगभग IE6 जितना धीमा है, निश्चित रूप से IE7 की तुलना में धीमा है ...) मैं एक अधिक क्रॉस-ब्राउज़र की तलाश में रहूंगा उपाय।

— नीट द डार्क एबसोल

@WesleyMurch, मैं तुम्हें अनुरोध कर सकते हैं एक एक सीएसएस पर एक अलग विषय पर पर देखो, jQuery सवाल है करने के लिए stackoverflow.com/questions/14137378/...

— Istiaque अहमद

Answer 3

.class {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}

से कॉपी किया गया: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Comments

शायद मैं पर्याप्त स्पष्ट नहीं था। मैं एक पृष्ठभूमि छवि को आंशिक रूप से पारदर्शी बनाना चाहता हूं ।

— नीट द डार्क एबसोल

@NiettheDarkAbsol आप स्पष्ट थे कि आप "वर्कअराउंड" नहीं चाहते हैं, लेकिन एक उदाहरण दिया है और जानते हैं कि उत्तर "NO YOU CAN'T" नहीं है। तो यह उदाहरण उस परिदृश्य के लिए काम करता है (जो आप नहीं दे रहे हैं लेकिन अस्वीकार कर रहे हैं) जहां आपकी छवि के पीछे एक ठोस पृष्ठभूमि है। बस अपनी छवि के शीर्ष पर एक और पृष्ठभूमि जोड़ें, जिसमें आरजीबीए बैक रंग से मेल खाता है। "प्रभाव" आपकी छवि पारदर्शी है। आपको उत्तर को खुशी से स्वीकार करना चाहिए या किसी अन्य प्रश्न को खोलना चाहिए क्योंकि यह एक "NO, आप नहीं कर सकते" के साथ हल किया गया है

— सर्जियो

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

— नीट द डार्क एबसोल

Answer 4

इस ट्रिक को आज़माएं .. (इनसेट) विकल्प के साथ css शैडो का उपयोग करें और उदाहरण के लिए गहरी 200px बनाएं

कोड:

box-shadow: inset 0px 0px 277px 3px #4c3f37;

।

सभी ब्राउज़रों के लिए भी:

-moz-box-shadow: inset 0px 0px 47px 3px #4c3f37;
-webkit-box-shadow: inset 0px 0px 47px 3px #4c3f37;
box-shadow: inset 0px 0px 277px 3px #4c3f37;

और अपने बॉक्स को भरने के लिए संख्या बढ़ाएँ :)

का आनंद लें!

Comments

यह ओपी चाहता है के लिए काम नहीं करता है, लेकिन मेरी आवश्यकताओं को पूरी तरह से भर देता है, धन्यवाद !!

— रोजा

@rozzA ओपी ने यह नहीं बताया कि पृष्ठभूमि में एक और छवि थी। वास्तव में वह केवल यह जानना चाहता था कि क्या पृष्ठभूमि की अस्पष्टता को बदलना संभव है, और उत्तर दिया: "नहीं"। यह एक अच्छा तरीका है :) लेकिन आरजीबीए पारदर्शिता के साथ एक नई पृष्ठभूमि को जोड़ने के लिए अलग नहीं है।

— सर्जियो

Answer 5

आप जिस तत्व को पारदर्शी पृष्ठभूमि देना चाहते हैं उसके अंदर एक दूसरा तत्व रख सकते हैं।

<div class="container">
    <div class="container-background"></div>
    <div class="content">
         Yay, happy content!
    </div>
</div>

फिर मूल तत्व को कवर करने के लिए '.container- बैकग्राउंड' को पूरी तरह से पोजिशन करें। इस बिंदु पर आप '.container' की सामग्री की अस्पष्टता को प्रभावित किए बिना इसकी अस्पष्टता को समायोजित कर सकेंगे।

.container {
    position: relative;
}
.container .container-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(background.png);
    opacity: 0.5;
}
.container .content {
    position: relative;
    z-index: 1;
}

Comments

क्या यह बिल्कुल "हैक" के समान नहीं है जिसका मैंने प्रश्न में उपयोग किया था?

— नीट द डार्क एबसोल

हम्म ... मुझे लगता है, लेकिन मुझे समझ नहीं आ रहा है कि आपके लिए क्या काम नहीं कर रहा है। मैं इस पद्धति का उपयोग करता हूं और यह बहुत अच्छा काम करता है।

— एलेक्स के

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

— सर्जियो

मैं बिल्कुल ओपी उदाहरण के रूप में मतलब था।

— सर्जियो

Answer 6

इसे इस्तेमाल करे

<div style="background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(/image.png);background-repeat: no-repeat; background-position: center;"> </div>

Comments

यदि आप पृष्ठभूमि-स्थिति को बदलते हैं, तो रैखिक-ढाल को स्थिति में देखना पसंद करेंगे।

— क्लेविस

Answer 7

आप CSS के माध्यम से छवि को संपादित नहीं कर सकते। एकमात्र उपाय जो मैं सोच सकता हूं, वह है छवि को संपादित करना और उसकी अस्पष्टता को बदलना, या आवश्यक सभी अपारदर्शिता के साथ अलग-अलग चित्र बनाना।

Comments

यदि हम ओपी को एक "विकल्प" प्रदान करते हैं, तो यह कठोर उत्तर है, लेकिन विचार करें कि उसने बाद में टिप्पणी की कि वह "एक उदाहरण प्रदान नहीं करना चाहता" (एक विकल्प प्रदान करने के लिए)। इसलिए विचार करना कि वह केवल उत्तर चाहता है, यहाँ यह है :)

— सर्जियो

Answer 8

#id {
  position: relative;
  opacity: 0.99;
}

#id::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('image.png');
  opacity: 0.3;
}

अस्पष्टता के साथ हैक 0.99 (1 से कम) z- इंडेक्स संदर्भ बनाता है ताकि आप वैश्विक z- इंडेक्स मानों के बारे में चिंता न कर सकें। (इसे निकालने की कोशिश करें और देखें कि अगले डेमो में क्या होता है, जहां पैरेंट रैपर में पॉजिटिव z-index होता है।)
यदि आपके एलिमेंट में पहले से ही z- इंडेक्स है, तो आपको इस हैक की जरूरत नहीं है।

डेमो ।

Comments

@ bjb568 हाँ, यह मेरा पहला विचार था। लेकिन यह वास्तव में पारभासी पृष्ठभूमि के रूप में काम नहीं करता है, इसके बजाय पारभासी अग्रभूमि के रूप में कार्य करता है। ब्लॉक छवि के अंदर एक छवि जोड़ने या पृष्ठभूमि का रंग (सफेद) रंग बदलने की कोशिश करें और आप देखेंगे।

— उपयोगकर्ता

@ bjb568 यूप, आपके उदाहरण में आप आंतरिक छवि पर पृष्ठभूमि को देख सकते हैं। "पृष्ठभूमि" तत्व की अस्पष्टता बढ़ाने की कोशिश करें, और आप देखेंगे कि आंतरिक छवि कैसे मिटती है।

— उपयोगकर्ता

@ bjb568 क्या आपने कभी सोचा है कि आपको क्यों जोड़ना पड़ा no-repeat? आपको लगता है कि आपका संस्करण ठीक है क्योंकि तत्व निश्चित आकार है जो bg छवि आकार के बराबर है, और क्योंकि आपके पास पृष्ठभूमि के साथ कोई मूल तत्व नहीं है (पृष्ठभूमि-रंग पर्याप्त होगा)।

— उपयोगकर्ता

@ bjb568 मैंने पूरी तरह से उदाहरण दिया। यदि आपको लगता है कि इसमें अतिरेक है, तो इसके साथ शुरू करें और कुछ भी निकालने की कोशिश करें। आप देखेंगे कि प्रत्येक पैरामीटर में जगह है। अगर आपको लगता है कि आपने एक और तकनीक ढूंढ ली है , तो कृपया इसे दूसरे उत्तर के रूप में पोस्ट करें ।

— उपयोगकर्ता

मैंने सोचा है। मैं इसे अजीब हैक के बिना भी कर सकता हूं। नो-रिपीट के लिए है ... यह रिपीट नहीं है। अच्छी बात है। एक और जवाब, फिर।

— bjb568

Answer 9

यहां सीएसएस के साथ ढाल और स्ट्रासपेरेंसी सेटअप के लिए एक और दृष्टिकोण है। आपको मापदंडों के साथ थोड़ा घेरने की जरूरत है।

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, transparent)),url("gears.jpg"); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Chrome10+,Safari5.1+ */
background-image:    -moz-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* FF3.6+ */
background-image:     -ms-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* IE10+ */
background-image:      -o-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Opera 11.10+ */
background-image:         linear-gradient(to bottom, transparent, transparent),url("gears.jpg"); /* W3C */

Answer 10

body {
  ' css code that goes in your body'
}

body::after {
  background: url(yourfilename.jpg);
  content: "";
  opacity: 0.6;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
  width:auto;
  height: 100%;
  }

तो इसके शरीर को कहने के लिए :: के बाद आप के लिए देख रहे हैं। इस तरह आपके शरीर के लिए कोड केवल पृष्ठभूमि में नहीं बदला जाता है या बदल दिया जाता है जहाँ आप आवश्यक परिवर्तन कर सकते हैं।