it-swarm.com.de

CSS3-Hintergrundbildübergang

Ich versuche mit dem CSS-Übergang einen Einblendeffekt zu erzeugen. Aber ich kann nicht mit dem Hintergrundbild arbeiten ...

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

Schauen Sie mal rein: http://jsfiddle.net/AK3La/

90
Nick Zani

Sie können background-image wechseln. Verwenden Sie das CSS unten für das Element img:

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

Dies wird von Chrome, Opera und Safari unterstützt. Firefox hat es noch nicht implementiert ( bugzil.la ). Nicht sicher über IE.

87
Hengjie

Die Lösung (die ich selbst gefunden habe) ist ein Ninja-Trick. Ich kann Ihnen zwei Möglichkeiten bieten:

zuerst müssen Sie einen "Container" für den <img> erstellen, der gleichzeitig die Zustände normal und hover enthält:

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

Grundsätzlich müssen Sie den "normalen" Zustand ausblenden und den "Schwebeflug" anzeigen, wenn Sie hover it

und das ist es, ich hoffe, jemand findet es nützlich.

34
Ruffo

Ich habe eine Lösung gefunden, die für mich funktioniert hat ...

Wenn Sie ein Listenelement (oder ein Div) haben, das nur den Link enthält, und sagen wir, dies ist für soziale Links auf Ihrer Seite zu Facebook, Twitter, ect. und du verwendest ein Sprite-Image, das kannst du tun:

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

Machen Sie den Hintergrund des "Li" zu Ihrem Schaltflächenbild

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

Machen Sie dann das Hintergrundbild des Links zum Hover-Status der Schaltfläche. Fügen Sie auch das Deckkraftattribut hinzu und setzen Sie es auf 0.

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

Alles was Sie jetzt brauchen, ist "Deckkraft" unter "a: hover" und setzen Sie diesen Wert auf 1.

#facebook a:hover {
   opacity:1;
}

Fügen Sie die Attribute für den Deckkraftübergang für jeden Browser zu "a" und "a: hover" hinzu, damit die endgültige CSS in etwa wie folgt aussieht:

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

Wenn ich es richtig erklärt habe, sollten Sie einen verblassenden Hintergrundbild-Button haben, hoffe es hilft zumindest!

14

Leider können Sie Transition nicht für background-image verwenden, siehe w3c Liste der animierbaren Eigenschaften .

Vielleicht möchten Sie ein paar Tricks mit background-position machen.

10
Olwaro

Sie können ein Pseudoelement verwenden, um den gewünschten Effekt zu erzielen, wie ich es bei Fiddle getan habe.

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>
10
MaxCloutier

Wenn Sie jQuery verwenden können, können Sie versuchen, das Hintergrundbild mit Effekten mit BgSwitcher plugin zu wechseln. Es ist sehr einfach zu verwenden.

Zum Beispiel :

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

Und fügen Sie Ihren eigenen Effekt hinzu, siehe Hinzufügen von Effekttypen

9
MaxDhn

Wenn die Animation von opacity keine Option ist, können Sie background-size auch animieren.

Zum Beispiel habe ich dieses CSS verwendet, um einen backgound-image mit einer Verzögerung festzulegen.

.before {
  background-size: 0;
}

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

Salam, diese Antwort funktioniert nur in Chrome, da IE und FF Farbübergänge unterstützen. 

Es ist nicht erforderlich, Ihre HTML-Elemente zu opacity:0 zu machen, da sie manchmal Text enthalten und Ihre Elemente nicht zu verdoppeln sind!.

Die Frage mit einem Link zu einem Beispiel in jsfiddle benötigte eine kleine Änderung, das heißt, ein leeres Bild in .title a wie background:url(link to an empty image); zu platzieren, so wie Sie es in .title a:hover eingegeben haben, aber ein leeres Bild machen, und der Code funktioniert.

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

Schauen Sie sich das an https://jsfiddle.net/Tobasi/vv8q9hum/

1

Versuchen Sie dies, wird der Hintergrund animiert im Web arbeiten, aber die mobile mobile App Funktioniert nicht

@-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;
}
1
Hesham Nasser

Da Hintergrundbilder nicht animiert werden können, habe ich ein kleines SCSS-Mixin erstellt, das den Übergang zwischen zwei verschiedenen Hintergrundbildern mithilfe von Pseudo-Selektoren vor und nach ermöglicht. Sie befinden sich in unterschiedlichen Z-Index-Schichten. Der vorausgehende beginnt mit der Deckkraft 0 und wird mit dem Hover sichtbar. 

Sie können auf dieselbe Weise auch Animationen mit linearen Farbverläufen erstellen.

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

Jetzt können Sie es einfach mit benutzen

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

Sie können es hier ausprobieren: https://jsfiddle.net/pablosgpacheco/01rmg0qL/

0

Mit Chris inspirierendem Beitrag hier:

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

Ich habe es geschafft:

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