[css] CSS3 배경 이미지 전환

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