CSS3를 사용하여 배경 이미지를 올바르게 전환하는 방법은 무엇입니까?

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

위 코드는 칭찬할 만한 시도를 보여주지만 두 요소 사이의 미묘하지만 중요한 차이점을 설명하지 못합니다. 배경 속성과 배경 이미지 속성. 배경 이미지에 애니메이션을 적용하려면 단순히 "배경"이 아닌 "배경 이미지"로 전환을 적용해야 합니다.

업데이트된 코드는 다음과 같습니다.

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background-image 1s;
    -moz-transition: background-image 1s;
    -o-transition: background-image 1s;
    transition: background-image 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-image 1s;
    -moz-transition: background-image 1s;
    -o-transition: background-image 1s;
    transition: background-image 1s;
}

이 조정을 통해 부드러운 배경 이미지가 활성화되어야 합니다. 배경 이미지를 찾는 전환입니다. CSS 전환에서 배경 이미지로 작업할 때 항상 전환 속성의 대상으로 "배경 이미지"를 지정하십시오.

위 내용은 CSS3를 사용하여 배경 이미지를 올바르게 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!