로드 할 때 배경 이미지가 흐리게 회색 음영으로 표시되게하려면 어떻게해야합니까?

현재 배경 이미지가있는 부트 스트랩 웹 페이지가 있습니다. 이미지가 회색 음영으로 시작한 다음 페이지가로드되면 (점보 이동하지 않음) 점차적으로 색이 바래 게하고 싶습니다.로드 할 때 배경 이미지가 흐리게 회색 음영으로 표시되게하려면 어떻게해야합니까?

CSS/HTML로 이것을 수행하는 가장 좋은 방법은 무엇입니까?

출처

2016-07-14 user6436986

첫 번째 게시물은 무엇입니까? StackOverflow에 오신 것을 환영합니다. 체크 아웃 [CSS를 사용하여 컬러 이미지를 흑백으로 변환 ...] (http://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS) 그런 다음 ' 시도했다. 힌트 : JSFiddle은 실제로 작은 코드를 표시하는 데 가장 좋은 도구입니다. 누군가가 당신을 도울 수 있습니다. – zipzit

CSS의 배경 이미지로는 그럴 수 없습니다. –

@Paulie_D 배경, 이미지는 무엇입니까? 좋아요. 그래서 이미지가있는 div와 낮은 Z- 인덱스가 있습니다. 그게 너에게 효과가 있니? – zipzit

CSS 키 프레임 애니메이션을 사용하면이 작업을 수행 할 수 있습니다.

다음에 확장 할 것이다 :

@keyframes greyscale-fade-in { 
    0% { -webkit-filter: grayscale(100%); } 
    100% { -webkit-filter: grayscale(0%); } 
} 


.image-selector { 
    animation: greyscale-fade-in 1s ease-in forwards; 
}

키 프레임을 사용하면 이미지가 페이지가로드로 적응하는 방법을 제어 할 수 있습니다.

animation 값, 당신은 그 애니메이션 효과가 지속되기 원하는 시간 (1s 1 초입니다) (greyscale-fade-in)를 사용하여 키 프레임 어떤 말 할 필요가 있습니다 (ease-in)을 전환 어떤 시간을 싶습니다.

forwards 매개 변수는 애니메이션이 0 % - 100 %에서만 실행되고 100 %에서 0 %로 되돌아 가지 않는다고 알려줍니다.

이미지를 타겟팅하는 선택 도구에 애니메이션 규칙을 적용해야하므로 <img> 또는 래퍼 <div>에 타겟팅 할 수있는 클래스가 있어야합니다.

애니메이션에 대한 자세한 내용은 다음을 참조하십시오. https://developer.mozilla.org/en-US/docs/Web/CSS/animation

출처

2016-07-14 18:58:57

그게 좋은 해결책이야! - 해결책을 스스로 찾아 내려고 노력했지만 너를 테스트 해 보았는데 훌륭하게 작동했습니다. 누군가가 호기심을 자극한다면 바이올린을 만들었습니다. https://jsfiddle.net/26zpq6vc/6/하지만 그 하나만 들어도 충분합니다. – HisPowerLevelIsOver9000

대단히 고마워요! –

로드 할 때 배경 이미지가 흐리게 회색 음영으로 표시되게하려면 어떻게해야합니까?

답변

관련 문제