सीएसएस फीड होवर पर पृष्ठभूमि छवियों के बीच फीका

Question

क्या कोई तरीका है कि मैं निम्नलिखित कर सकता हूं?

मेरे पास एक पारदर्शी पीएनजी स्प्राइट है जो बाईं ओर एक मानक तस्वीर दिखाता है, और दाईं ओर होवर स्थिति के लिए एक तस्वीर दिखाता है।

क्या कोई तरीका है कि मैं छवि को बाएं छवि से दाएं छवि में फीका कर सकता हूं: केवल css3 संक्रमणों का उपयोग करके होवर करें? मैं निम्नलिखित की कोशिश की है, लेकिन यह काम नहीं करता है:

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;} 
li{background:url(/img/sprites.png) 0 -50px no-repeat;} 
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;} 

अब, ऊपर पृष्ठभूमि चेतन करता है, यह भर में छवि धूपदान। एक पैन के बजाय मुझे क्या पसंद है एक फीका या भंग प्रभाव है।

अद्यतन: मैं दो तत्वों को बनाने के लिए और सिर्फ अलग अस्पष्टता चेतन होने समाप्त हो गया। यह एक गड़बड़ है क्योंकि मुझे प्रत्येक तत्व के सटीक मार्जिन निर्दिष्ट करना है, लेकिन मुझे लगता है कि यह काम करेगा। सभी की मदद के लिए धन्यवाद :) कि अगर यह ठीक करता है या नहीं है, हालांकि

Answer 1

li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);} 
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);} 

li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);} 
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);} 

यकीन है कि नहीं होना चाहिए।

Answer 2

आपने वास्तविक संक्रमण करने के लिए कोई कोड निर्दिष्ट नहीं किया है।

http://css3.bradshawenterprises.com/cfimg1/

अपने मंडराना शैली में इस आजमाएं:

-webkit-transition: opacity 1s ease-in-out; 
-moz-transition: opacity 1s ease-in-out; 
-o-transition: opacity 1s ease-in-out; 
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out; 

Answer 3

इस पर एक नज़र डालें: http://jsfiddle.net/j5brM/1/

मैं इस सूट अपने सभी जरूरतों और उसके एक छोटा सा कम जटिल लगता है।

Answer 4

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

Answer 5

इस विषय पर ताजा खबर:

Chrome 19 और नए का समर्थन करता है पृष्ठभूमि छवि संक्रमण:

डेमो: http://dabblet.com/gist/1991345

अतिरिक्त जानकारी: http://oli.jp/2010/css-animatable-properties/

Answer 6

मैं जानता हूँ कि यह हो सकता है देर से एक टैड हो। लेकिन मैं एक ही मुद्दे के साथ लंबे समय से संघर्ष कर रहा था। पारदर्शी sprites के साथ भी कई समाधान काम नहीं लग रहा है।

मैं क्या इस

एचटीएमएल

<div class="sprite-one"> 
    <span class="foo"></span><span class="zen"></span> 
</div> 

सीएसएस

.sprite-one { 
height: 50px 
width: 50px 
} 
.sprite-one span { 
width: 50px; 
height: 50px; 
display: block; 
position: absolute; 
} 
.foo, .zen { 
background-image: url(sprites.png) no-repeat; 
-webkit-transition: opacity .6s ease-in-out; 
-moz-transition: opacity .6s ease-in-out; 
-o-transition: opacity .6s ease-in-out; 
transition: opacity .6s ease-in-out; 
} 
.foo { 
background-position: 0 0; 
opacity: 1; 
} 
.zen { 
background-position: -50px 0; 
opacity: 0; 
} 
.sprite-one:hover .foo { 
opacity: 0; 
} 
.sprite-one:hover .zen { 
opacity: 1; 
} 

यह एक शुद्ध सीएसएस रास्ता & है कोडिंग का एक बहुत का एक सा है .. लेकिन वांछित प्रभाव हासिल करने का एकमात्र तरीका लगता है! आशा है कि इस पर ठोकरें भी इससे कुछ मदद पा सकते हैं!

Answer 7

<li class="image transition"></li> 

css: 
.image{ 
background-image: url("some/file/path.png"); 
background-repeat: no-repeat; 
width: XXpx; 
height: XXpx; 
background-position: center center; 
background-size: cover; 
} 

/* DRY */ 
.transition{ 
transition: background 0.6s; 
-webkit-transition: background 0.6s; 
} 

.image:hover{ 
background-image: url("some/file/path_hoverImage.png"); 
} 

Answer 8

सीएसएस: -

li { पृष्ठभूमि: यूआरएल (http://oakdale.squaresystem.co.uk/images/solutions.png) नहीं दोहराने बाईं केंद्र; पृष्ठभूमि आकार: 89 पीएक्स; पैडिंग: 54 पीएक्स 0 54 पीएक्स 130 पीएक्स; वेबकिट-संक्रमण: सभी 0.5s रैखिक; -मोज़-संक्रमण: सभी 0.5s रैखिक; -o-transition: सभी 0.5s रैखिक; संक्रमण: सभी 0.5s रैखिक; }

ली: मंडराना { पृष्ठभूमि का आकार: उनका कहना है कि बाहर के लिए 50px }