너비와 높이가 100 % 인 배경으로 사용되는 회전 이미지

브라우저 창을 확장하거나 축소하면 확대/축소되는 회전 배경 이미지를 어떻게 가질 수 있습니까?너비와 높이가 100 % 인 배경으로 사용되는 회전 이미지

누구든지이 작업을 수행하는 스크립트를 알고 있습니까? 또는 CSS가있는 방법이 있습니까?

2011-07-17 javi

SuperSized라는 jQuery 플러그인이 있습니다. http://buildinternet.com/project/supersized/ 플러그인이 모든 크로스 브라우저 호환성을 처리하고 원하는 경우 원하는 시간 간격으로 이미지를 스왑합니다.

또는이 작업을 수행 할 수있는 HTML5의 방법 (전용 크롬과 같은 몇 가지 브라우저에서 지원) : 스스로 할 http://jsfiddle.net/jfriend00/vzYrf/

html { 
     background: url(http://photos.smugmug.com/photos/344291068_HdnTo-XL.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
}

또는 두 개 더 방법 : Perfect Full Page Background Image합니다.

출처

2011-07-17 05:55:00 jfriend00

은 다른 사람이 뭔가를 추천 하는가? – javi

어떻게 작동합니까? 다운로드하고 내 웹 사이트가 저장된 것과 동일한 경로 또는 폴더에 저장했는데 어떻게 활성화합니까? 그것은 단지 파일입니다. jQuery를 처음 접했을 때, 혼란 스러웠습니다. – javi

페이지에 코드와 jQuery를 포함시킨 다음 전체 화면 배경 슬라이드 쇼 사용 지침을 따르십시오. – jfriend00

는 간단한 :)

일부 CSS의 :

 
<style type="text/css"> 
    html { height: 100%; overflow:hidden;} 
    body { background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; } 
    img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: black; } 
</style>

이 값으로 재생할 수 있습니다

...

및 본문 내용 :

 
<body bgcolor="#000300" style="margin:0px; width:100%"> 
<img id="background" src="background.jpg" alt="My Background" /> 
</body>

이 1입니다 배경, 나머지는 자바 스크립트로 할 수 있습니다 ...

012 3,516,

 
<script type="text/javascript"> 
    function changeBackground(){ 
     var backgrounds = ['back1.jpg', 'back2.jpg', 'back3.jpg']; 
     var inRandom = Math.floor(Math.random() * backgrounds.length); 
     document.getElementById('background').src = backgrounds[inRandom]; 
     setTimeout ("changeBackground()", 10000); 
    } 
    setTimeout ("changeBackground()", 10000); 
</script>

내가 스크립트를 테스트하지 않았다, 그러나 이것은 기본적으로 생각

...

출처

2011-07-17 06:20:19

너비와 높이가 100 % 인 배경으로 사용되는 회전 이미지

답변

관련 문제