CSS3 पृष्ठभूमि छवि संक्रमण

Question

मैं सीएसएस संक्रमण का उपयोग करके "फीका-इन फीका-आउट" प्रभाव बनाने की कोशिश कर रहा हूं। लेकिन मैं पृष्ठभूमि छवि के साथ काम करने के लिए इसे प्राप्त नहीं कर सकता ...

सीएसएस:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}​

देख लो: http://jsfiddle.net/AK3La/

Answer 1

आप संक्रमण कर सकते हैं background-image। imgतत्व पर नीचे दिए गए CSS का उपयोग करें :

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

यह क्रोम, ओपेरा और सफारी द्वारा मूल रूप से समर्थित है। फ़ायरफ़ॉक्स ने इसे अभी तक लागू नहीं किया है ( bugzil.la )। IE के बारे में निश्चित नहीं है।

Comments

background-imageएक एनिमेटेबल प्रॉपर्टी ( w3.org/TR/css3-transitions/#animatable-properties ) नहीं है, इसलिए आपका समाधान मानक अनुरूप नहीं है।

— टिंडिग'

यह एक समाधान नहीं है - एफएफ और आईई इसका समर्थन नहीं करते हैं, और जैसा कि ऊपर उल्लेख किया गया है कि यह एक संपत्ति नहीं है जो कहता है कि समर्थन किया जाना चाहिए।

— प्रहरी

Fx में वर्तमान विकास के लिए भी देखें: Bugzilla.mozilla.org/show_bug.cgi?id=546052

— Volker E.

@TLindig यह एक एनिमेटेड संपत्ति होनी चाहिए।

एनिमेट करने योग्य संपत्ति है background, और यह वह है जिसका उपयोग किया जाना चाहिए (यह मेरे लिए क्रोम में काम करता है)। हो सकता है कि प्रश्न पोस्ट किए जाने के बाद से कल्पना (या निहितार्थ) बदल गया हो

— एफपीएस

Answer 2

समाधान (जो मुझे स्वयं मिला) एक निंजा चाल है, मैं आपको दो तरीके दे सकता हूं:

पहले आपको इसके लिए एक "कंटेनर" बनाने की आवश्यकता है <img>, इसमें एक ही समय में सामान्य और मंडराने वाले राज्य शामिल होंगे :

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>

• CSS3 के चयनकर्ताओं के साथ http://jsfiddle.net/eD2zL/1/ (यदि आप इस एक का उपयोग करते हैं, तो "सामान्य" स्थिति आपके कंटेनर में पहली संतान होगी, या nth-child()ऑर्डर बदल देगी )

• CSS2 के समाधान http://jsfiddle.net/eD2zL/2/ (कुछ ही चयनकर्ताओं के बीच अंतर)

मूल रूप से, आपको "सामान्य" स्थिति को छिपाने और जब आप इसे मँडराते हैं तो उनका "होवर" दिखाने की आवश्यकता होती है

और यह बात है, मुझे आशा है कि किसी को यह उपयोगी लगेगा।

Comments

अच्छा समाधान है। पहले नमूने के साथ प्रयोग करते समय, मैंने देखा कि यदि आप संक्रमण की अवधि को 4 जी तक बढ़ा देते हैं, तो आप एक बहुत ही उल्लेखनीय कूद देख सकते हैं जब z-index संक्रमण के बीच में बदल जाता है। कम से कम क्रोम 35 पर, आप z- इंडेक्स स्विच की टाइमिंग को शिफ्ट कर सकते हैं और प्रॉपर्टी की वैल्यू को "ऑल द 4 सी ईज़ी, जेड-इंडेक्स 1ms" ( jsfiddle.net/eD2zL/330 ) में बदलकर क्लीन कर सकते हैं ।

— नील स्टबलेन

@NealS। आप सही हे। यह उत्तर 2 साल पुराना है, हालांकि, मैं z- इंडेक्स निकालूंगा, यह अनावश्यक लगता है। छवियों को बस क्रम में होना चाहिए।

— रफू जूल

बहुत बहुत धन्यवाद। आपका समाधान मेरे लिए बहुत मददगार है।

— स्लैम

यदि मैं इस समाधान का उपयोग करता हूं तो क्या "आलसी लोडिंग" संभव है?

— डैनियल

Answer 3

मैंने एक समाधान निकाला है जो मेरे लिए काम करता है ...

यदि आपके पास एक सूची आइटम (या div) है, जिसमें केवल लिंक है, और मान लें कि यह आपके पृष्ठ के सामाजिक लिंक के लिए facebook, twitter, ect पर है। और आप एक प्रेत छवि का उपयोग कर रहे हैं जो आप यह कर सकते हैं:

<li id="facebook"><a href="facebook.com"></a></li>

"ली" पृष्ठभूमि अपनी बटन छवि बनाओ

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

फिर लिंक की पृष्ठभूमि छवि को बटन की होवर स्थिति बनाएं। इसके अलावा अपारदर्शिता विशेषता को भी जोड़ें और इसे 0 पर सेट करें।

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

अब आपको बस "हॉवर" के तहत "अपारदर्शिता" की जरूरत है और इसे 1 पर सेट करें।

#facebook a:hover {
   opacity:1;
}

प्रत्येक ब्राउज़र के लिए "a" और "a: hover" के लिए अस्पष्टता संक्रमण गुण जोड़ें ताकि अंतिम css कुछ इस तरह दिखाई दे:

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

अगर मैंने इसे सही ढंग से समझाया कि आपको एक फीका बैकग्राउंड इमेज बटन देना चाहिए, तो उम्मीद है कि यह कम से कम मदद करता है!

Comments

मैंने इसका वीडियो ट्यूटोरियल संस्करण भी बनाया। youtube.com/watch?v=6ieR5ApVpr0

— ऑस्टिन पैरिश थॉमस

आपको नहीं चाहिए, AFAIK, मंडराना छद्मकोश पर संक्रमण को निर्दिष्ट करने की आवश्यकता है; एंकर टैग प्रकार के लिए संक्रमण परिभाषा हॉवर व्यवहार को आगे ले जाएगी, आपको केवल बदलने की आवश्यकता है अपारदर्शिता। ध्यान रखें कि यह उदाहरण अच्छी तरह से काम करता है क्योंकि शैलियों को सीधे आईडी / टैग प्रकारों पर लागू किया जाता है; यदि आप कक्षाओं के साथ ऐसा करते हैं, तो आपको यह सुनिश्चित करना होगा कि आप परिभाषित संक्रमण वाले वर्ग को जोड़ और हटा नहीं रहे हैं।

— कीथ्स

Answer 4

दुर्भाग्य से आप संक्रमण का उपयोग नहीं कर सकते हैं background-image, एनिमेट करने योग्य गुणों की w3c सूची देखें ।

आप के साथ कुछ ट्रिक्स करना चाह सकते हैं background-position।

Answer 5

आप छद्म तत्व का उपयोग उस प्रभाव को प्राप्त करने के लिए कर सकते हैं जैसा आप चाहते हैं जैसा मैंने उस फिडल में किया था ।

सीएसएस:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    position: relative;
}
.title a:after {
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    content: "";
    opacity: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    /* TRANSISITION */
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{   
    opacity: 1;
}

HTML:

<div class="title">
    <a href="#">HYPERLINK</a>
</div>

Comments

यह अच्छा काम करता है, लेकिन आप 2 समस्या में पड़ सकते: यदि आप नहीं दिख रहा है 1) :afterतत्व, सेट करके देखें widthऔर heightके रूप में 100%के बजाय inherit, 2) अगर background-imageवास्तव में में प्रदर्शित किया जाता अग्रभूमि , के लिए उपयोग नकारात्मक सूचकांक :afterतत्व:z-index: -1;

— राडेक पेच

Answer 6

यदि आप jQuery का उपयोग कर सकते हैं, तो आप BgSwitcher को आज़मा सकते हैं पृष्ठभूमि-छवि को प्रभाव से बदलने के लिए प्लगइन की हैं, इसका उपयोग करना बहुत आसान है।

उदाहरण के लिए :

$('.bgSwitch').bgswitcher({
        images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
        effect: "fade",
        interval: 10000
});

और अपना प्रभाव जोड़ें, एक प्रभाव प्रकार जोड़ते हुए देखें

Comments

धन्यवाद, मैं इस प्लगइन के उपयोग के साथ तालिका पृष्ठभूमि परिवर्तन के animating के साथ समस्या को हल किया है।

— userlond

Answer 7

इसे आज़माएं, पृष्ठभूमि को वेब पर हाइलाइट किए गए काम करेगा लेकिन हाइब्रिड मोबाइल ऐप काम नहीं कर रहा है

@-webkit-keyframes breath {
 0%   {  background-size: 110% auto; }
 50%  {  background-size: 140% auto; }
 100% {  background-size: 110% auto; }      
}
body {
   -webkit-animation: breath 15s linear infinite;
   background-image: url(images/login.png);
    background-size: cover;
}

Answer 8

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

आप इसे रैखिक-ग्रेडिएंट के साथ एनिमेशन बनाने के लिए समान दृष्टिकोण का उपयोग कर सकते हैं।

एससीएसएस

@mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){  
  position: relative;  
  z-index: 100; 
  &:before, &:after {
    background-size: cover;  
    content: '';    
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;    
    width: 100%;    
    transition: opacity $transTime;
  }
  &:before {    
    z-index: -101;
    background-image: url("#{$bkg1}");    
  }
  &:after {    
    z-index: -100;
    opacity: 0;
    background-image: url("#{$bkg2}");    
  }
  &:hover {
     &:after{
       opacity: 1; 
     }
  }  
}

अब आप बस इसके साथ उपयोग कर सकते हैं

@include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");

आप इसे यहाँ देख सकते हैं: https://jsfiddle.net/pablosgpacheco/01rmg0qL/

Comments

बहुत अच्छा समाधान! मुझे यह बताने की बेहतर समझ है कि तत्व राज्यों का अच्छा उपयोग कैसे करें ':' से पहले 'और': 'के बाद' बोनस के रूप में :-)

— joronimo

Answer 9

यदि opacityऐनिमेट करना कोई विकल्प नहीं है, तो आप एनिमेट भी कर सकते हैं background-size।

उदाहरण के लिए, मैंने backgound-imageविलंब के साथ सेट करने के लिए इस CSS का उपयोग किया ।

.before {
  background-size: 0;
}

.after {
  transition: background 0.1s step-end;
  background-image: $path-to-image;
  background-size: 20px 20px;
}

Comments

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

— राडेक पीच

Answer 10

सलाम, यह उत्तर केवल क्रोम में काम करता है, IE और FF समर्थन रंग संक्रमण का कारण बनता है।

आपके HTML तत्वों को बनाने की आवश्यकता नहीं है opacity:0, कुछ समय के लिए उनमें पाठ होता है, और आपके तत्वों को दोगुना करने की कोई आवश्यकता नहीं है!

Jsfiddle में एक उदाहरण के लिंक के साथ प्रश्न में एक छोटे से बदलाव की आवश्यकता थी, वह यह है कि एक खाली छवि को उसी .title aतरह से background:url(link to an empty image);रखा जाए जैसे आप इसे डालते हैं .title a:hoverलेकिन इसे खाली छवि बनाते हैं, और कोड काम करेगा।

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
  }
  .title a:hover{   background: transparent;
   background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}

इसे देखें https://jsfiddle.net/Tobasi/vv8q9hum/

Comments

फिर भी आग लोमड़ी या IE :( पर काम कर रहा है, लेकिन क्रोम में ठीक लग रहा है

— मोहम्मद सुलेमान

Answer 11

क्रिस के प्रेरणादायक पोस्ट के साथ यहाँ:

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

मैं इसके साथ आने में कामयाब रहा:

#banner
{
    display:block;
    width:100%;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-image:url(../images/image1.jpg);
    /* HOVER OFF */
    @include transition(background-image 0.5s ease-in-out); 

    &:hover
    {
        background-image:url(../images/image2.jpg);
        /* HOVER ON */
        @include transition(background-image 0.5s ease-in-out); 
    }
}

Answer 12

इस उत्तर के रूप में छद्म तत्वों का उपयोग करके स्वीकृत उत्तर से अधिक क्रॉस-ब्राउज़र समर्थन प्राप्त किया जा सकता है: https://stackoverflow.com/a/19818268/2602816

Answer 13

मैं इसके लिए थोड़ा संघर्ष कर रहा था, मैंने पहली बार एक-दूसरे के ऊपर और हर तीन सेकंड में छवियों के ढेर का उपयोग किया, मैं स्टैक में अगली छवि को चेतन करने की कोशिश कर रहा था और वर्तमान छवि को ढेर के नीचे फेंक रहा था। उसी समय मैं एनिमेशन का उपयोग कर रहा था जैसा कि ऊपर दिखाया गया है। मैं इसे मेरे जीवन के लिए काम नहीं कर सका।

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

https://github.com/jquery-backstretch/jquery-backstretch