전환 배경 이미지

나는 웹 프로그래밍 세계에 조금은 초보자이지만 사진의 흑백 버전에서 일반 컬러 버전으로 전환 할 웹 페이지를 개발하려고합니다. 페이지가로드 될 때 사진.전환 배경 이미지

여러 가지 시도를 한 후에 가장 좋은 방법은 컬러 버전을 즉시 표시하는 것입니다. 또한 JQuery로 약간 놀아 보려고했지만 어떤 이유로 페이지를 올바르게로드 할 수 없습니다. 일반 버전으로 전환하는 대신 흑백 버전을 유지했습니다. 다음과 같이

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<link rel="stylesheet" type="text/css" href="index.css"> 
<link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'> 
<title>UCLA Wushu - Home</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
     $("html").animate({'background' : 'url(images/home_background.jpg) no-repeat center center fixed'}, 'slow'); 
}); 
</script> 

</head> 
<body> 
<div id="container"> 
<div id="middleBar"> 
<strong> 
<a href="index.html">My Portal</a> 
</strong> 
<div id="enter"><a href="announcements.html">Enter</a></div> 
</div> 
</div> 
</body> 
</html>

관련 CSS는 (필자는 브라우저에 효과적으로 배경 이미지를 스트레칭하기 위해 복사 및 붙여 넣기)입니다 :

@charset "UTF-8"; 
/* CSS Document */ 
html { 
    background: url(images/home_background_bw.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

주시기 바랍니다 다음과 같이

html로는 이 형식을 사용하여 흑백에서 컬러로 부드럽게 전환 할 수있는 방법이 있는지 알고 있습니다. 감사합니다 :)

출처

2013-08-13 user2677707

나는 채도 플러그인 등을 사용하지 않고 가장 쉬운 해결책은 body 태그 바로 뒤에 컬러 이미지와 제로 불투명도로 div를 넣은 다음 해당 div의 불투명도를 100 %로 애니메이션하는 것이라고 생각합니다. 당신의 HTML의

부 :

... 
<title>UCLA Wushu - Home</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
     $("#colored-bg").animate({ 
      opacity: 100 
     }, 'slow'); 
}); 
</script> 

</head> 
<body> 
<div id="colored-bg"></div> 
<div id="container"> 
<div id="middleBar"> 
...

CSS : 나는 당신이 원하는 것을 이해한다면

#colored-bg { 
    background: url(images/home_background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    opacity: 0; 
    filter: ~"alpha([email protected]{0})"; // IE 
    // following will strecth the element from corner to corner 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}

출처

2013-08-13 08:28:27

하면, 당신은 예를 들어 그와 같이

-webkit-transition: background-color 2s linear; 
-moz-transition: background-color 2s linear; 
-ms-transition: background-color 2s linear; 
-o-transition: background-color 2s linear; 
transition: background-color 2s linear;

에 사용할 시도 할 수 있습니다 : http://jsfiddle.net/guillaumek/CcNHv/

출처

2013-08-13 08:32:45 guillaumek

이것을 확인하십시오. JSFIDDLE

검은 색과 검은 색 및 다른 색의 이미지 두 개를 사용합니다. 컬러 이미지는 흑백 이미지 뒤에 숨겨져 있습니다.

그런 다음 흑백 이미지가 흐려져 컬러 이미지가 나타납니다.

확인해보십시오.

HTML :

<div id="color"> 
    <div id="blackAndWhite"></div> 
</div>

jQuery를 :

$("#blackAndWhite").click(function(){ 
$(this).fadeOut(5000); 
});

는 희망이 도움이!

출처

2013-08-13 09:28:27 Harshad

답변

관련 문제