CSS 전환을 사용하여 "페이드 인 페이드 아웃"효과를 만들려고합니다. 그러나 나는 이것을 배경 이미지와 함께 작동시킬 수 없습니다 ...

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

보세요 : http://jsfiddle.net/AK3La/

전환 할 수 있습니다 background-image. img요소에 아래 CSS를 사용하세요 .

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

이것은 Chrome, Opera 및 Safari에서 기본적으로 지원됩니다. Firefox는 아직 구현하지 않았습니다 ( bugzil.la ). IE에 대해 잘 모르겠습니다.

(내가 직접 찾은) 해결책은 닌자 트릭이며, 두 가지 방법을 제공 할 수 있습니다.

먼저에 대한 "컨테이너"를 만들어야합니다 <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/ (차이점은 몇 가지 선택 자일뿐입니다)

기본적으로 "정상"상태를 숨기고 마우스를 가져갈 때 "호버"를 표시해야 합니다.

그게 전부입니다. 누군가 유용하게 사용하기를 바랍니다.

저에게 맞는 솔루션을 찾았습니다 ...

링크 만 포함 된 목록 항목 (또는 div)이 있고 페이지의 소셜 링크를 페이스 북, 트위터 등으로 연결한다고 가정 해 보겠습니다. 스프라이트 이미지를 사용하고 있습니다.

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

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

이제 필요한 것은 "a : hover"아래의 "opacity"이고 이것을 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;
}

페이딩 배경 이미지 버튼이있을 수 있도록 올바르게 설명했다면 적어도 도움이되기를 바랍니다.

안타깝게도에서 전환을 사용할 수 없습니다 . 애니메이션 가능한 속성background-image 의 w3c 목록을 참조하세요 .

을 사용하여 몇 가지 트릭을 수행 할 수 있습니다 background-position.

Fiddle 에서했던 것처럼 의사 요소를 사용하여 원하는 효과를 얻을 수 있습니다 .

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를 사용할 수 있다면 BgSwitcher 플러그인을 사용하여 효과로 배경 이미지를 전환 할 수 있습니다. 사용하기가 매우 쉽습니다.

예 :

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

자신 만의 효과를 추가하려면 효과 유형 추가를 참조하십시오.

이것을 시도하면 배경 애니메이션이 웹에서는 작동하지만 하이브리드 모바일 앱은 작동하지 않습니다.

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

배경 이미지에 애니메이션을 적용 할 수 없다는 점을 고려하여 약간의 SCSS 믹스 인을 만들어 . 이전 과 이후에 의사 선택기 를 사용하여 2 개의 서로 다른 배경 이미지간에 전환 할 수 있습니다. 서로 다른 Z- 색인 레이어에 있습니다. 앞에있는 것은 불투명도 0으로 시작하여 호버로 표시됩니다.

선형 그래디언트로 애니메이션을 만드는 데에도 동일한 접근 방식을 사용할 수 있습니다.

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

이제 간단히 사용할 수 있습니다.

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

여기에서 확인할 수 있습니다 : https://jsfiddle.net/pablosgpacheco/01rmg0qL/

애니메이션 opacity이 옵션이 아닌 경우 애니메이션을 적용 할 수도 있습니다.background-size .

예를 들어,이 CSS를 사용 backgound-image하여 a 지연 을 설정했습니다 .

.before {
  background-size: 0;
}

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

Salam,이 답변은 Chrome에서만 작동하므로 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/을 확인 하십시오.

Chris의 영감을주는 게시물은 다음과 같습니다.

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

이것은 다음 답변에 예시 된 것처럼 의사 요소를 사용하여 허용 된 답변보다 더 많은 브라우저 간 지원으로 달성 할 수 있습니다. https://stackoverflow.com/a/19818268/2602816

나는 이것으로 조금 어려움을 겪고 있었고 처음에는 이미지 스택을 서로 위에 사용했고 3 초마다 스택의 다음 이미지로 애니메이션을 적용하고 현재 이미지를 스택의 맨 아래로 던졌습니다. 동시에 위와 같은 애니메이션을 사용하고있었습니다. 제 삶을 위해 일할 수 없었습니다.

jquery-backstretch를 사용하여 ** 동적 크기의 슬라이드 쇼 지원 배경 이미지 **를 허용하는이 라이브러리를 사용할 수 있습니다.

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