CSS geçişini kullanarak "belirme karartma" efekti yapmaya çalışıyorum. Ama bunu arka plan resmiyle çalıştıramıyorum ...

CSS:

.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;
}​

Bir göz atın: http://jsfiddle.net/AK3La/

Geçiş yapabilirsiniz background-image. Öğede aşağıdaki CSS'yi kullanın img:

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

Bu, yerel olarak Chrome, Opera ve Safari tarafından desteklenmektedir. Firefox henüz uygulamadı ( bugzil.la ). IE hakkında emin değilim.

Çözüm (kendi başıma bulduğum) bir ninja numarası, size iki yol sunabilirim:

ilk olarak için bir "kapsayıcı" yapmanız gerekir <img>, bu aynı zamanda normal ve fareyle üzerine gelme durumlarını içerecektir :

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

• ile CSS3 seçicileri http://jsfiddle.net/eD2zL/1/ (eğer bu bir kullanırsanız, "normal" devlet ilk çocuk kapsayıcı olmak ya değişecek nth-child()sırasını)

• CSS2 çözümü http://jsfiddle.net/eD2zL/2/ (arasındaki farklar sadece birkaç seçicidir)

Temel olarak, "normal" durumu gizlemeniz ve fareyle üzerine geldiğinizde " üzerine gelindiğini " göstermeniz gerekir

ve işte bu, umarım birisi onu yararlı bulmuştur.

Benim için işe yarayan bir çözüm buldum ...

Yalnızca bağlantıyı içeren bir liste öğeniz (veya div) varsa ve bunun sayfanızdaki facebook, twitter vb. Sosyal bağlantılar için olduğunu varsayalım. ve bir hareketli resim kullanıyorsunuz, bunu yapabilirsiniz:

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

"Li" nin arka planını düğme görüntünüz yapın

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

Ardından, bağlantının arka plan resmini düğmenin fareyle üzerine gelme durumu yapın. Ayrıca buna opaklık özelliğini ekleyin ve 0 olarak ayarlayın.

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

Şimdi tek ihtiyacınız olan "a: hover" altındaki "opaklık" ve bunu 1 olarak ayarlayın.

#facebook a:hover {
   opacity:1;
}

Her tarayıcının opaklık geçiş özniteliklerini "a" ve "a: hover" a ekleyin, böylece son css şöyle görünecektir:

#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;
}

Soluk bir arka plan resmi düğmesine sahip olmanıza izin vermesi gerektiğini doğru açıkladıysam, en azından yardımcı olacağını umuyoruz!

Maalesef geçişi kullanamazsınız background-image, w3c canlandırılabilir özellikler listesine bakın .

İle bazı numaralar yapmak isteyebilirsiniz background-position.

O Fiddle'da yaptığım gibi, sözde elementi istediğiniz efekti elde etmek için kullanabilirsiniz .

CSS:

.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>

JQuery'yi kullanabiliyorsanız, arka plan görüntüsünü efektlerle değiştirmek için BgSwitcher eklentisini deneyebilirsiniz , kullanımı çok kolaydır.

Örneğin :

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

Ve kendi efektinizi ekleyin, bir efekt türü eklemeye bakın

Bunu deneyin, arka plan animasyonunun web üzerinde çalışmasını sağlar ancak hibrit mobil uygulama çalışmaz

@-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;
}

Arka plan resimlerinin canlandırılamayacağını düşünürsek, öncesinde ve sonrasında sahte seçiciler kullanarak 2 farklı arka plan resmi arasında geçişe izin veren küçük bir SCSS karışımı oluşturdum . Farklı z-endeksi katmanlarında bulunurlar. Önde olan, 0 opaklık ile başlar ve üzerine gelindiğinde görünür hale gelir.

Doğrusal degradelerle animasyonlar oluşturmak için de aynı yaklaşımı kullanabilirsiniz.

SCSS

@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; 
     }
  }  
}

Şimdi basitçe kullanabilirsiniz

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

Buradan kontrol edebilirsiniz: https://jsfiddle.net/pablosgpacheco/01rmg0qL/

Canlandırma opacitybir seçenek değilse, animasyon da yapabilirsiniz background-size.

Örneğin, bu CSS'yi backgound-imagebir gecikme ile ayarlamak için kullandım .

.before {
  background-size: 0;
}

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

Salam, bu cevap yalnızca Chrome'da çalışıyor, çünkü IE ve FF renk geçişini destekliyor.

HTML öğelerinizi oluşturmanıza gerek yok opacity:0, çünkü bazen metin içeriyorlar ve öğelerinizi ikiye katlamanıza gerek yok!

Jsfiddle'daki bir örneğe bağlantı içeren soru küçük bir değişikliğe ihtiyaç duydu, yani içine koyduğunuz .title agibi boş bir resim background:url(link to an empty image);koymak .title a:hoverama onu boş resim yapmak, kod çalışacaktır.

.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;
}

Şuna bak https://jsfiddle.net/Tobasi/vv8q9hum/

Chris'in ilham verici gönderisiyle birlikte:

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

Bunu bulmayı başardım:

#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); 
    }
}

Bu, şu yanıtla örneklendiği gibi sözde öğeler kullanılarak kabul edilen yanıttan daha fazla tarayıcılar arası destekle elde edilebilir: https://stackoverflow.com/a/19818268/2602816

Bununla bir süre uğraşıyordum, önce üst üste bir görüntü yığını kullandım ve her üç saniyede bir yığındaki bir sonraki görüntüyü canlandırmaya ve mevcut görüntüyü yığının altına atmaya çalışıyordum. Aynı zamanda yukarıda gösterildiği gibi animasyonlar kullanıyordum. Hayatım boyunca çalışmasını sağlayamadım.

Jquery-backstretch kullanarak ** dinamik olarak yeniden boyutlandırılmış, slayt gösterisi yapabilen arka plan görüntüsüne ** izin veren bu kitaplığı kullanabilirsiniz.

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