자바 스크립트의 크기 변경 배경 이미지

-2

나는 무작위로 새로운 배경 이미지를 선택하는 자바 스크립트가 있습니다.자바 스크립트의 크기 변경 배경 이미지

<script type="text/javascript"> 
    function changeImg(imgNumber) { 
     var myImages = ["images/001.jpg", "images/002.jpg", "images/003.jpg",  "images/004.jpg"]; 
     var imgShown = document.body.style.backgroundImage; 
     var newImgNumber =Math.floor(Math.random()*myImages.length); 
     document.body.style.backgroundImage =  'url('+myImages[newImgNumber]+')'; 
    } 
    window.onload=changeImg; 
    </script>

해당 이미지의 크기를 조정하는 방법을 알고 싶습니다. 또한 이미지를 페이지에 고정하지 않고 페이지와 함께 스크롤하는 방법을 알고 싶습니다.

출처

2013-02-21 user1877401

당신은 당신이 작업하고있는 코드를 게시 할 수 있습니까? –

코드가 작동합니다. – user1877401

제 지식에 따르면 CSS를 사용하여 본문의 배경 이미지 크기를 조정할 수 없습니다. 하지만 당신은 아래의 동일한 시나리오를 달성 할 수 있습니다. 당신은 자세한 내용이 알려하려는 경우

<html> 
    <head> 
     <style type="text/css"> 
      .bgimage{ 
       position:absolute; 
       top:0; 
       left:0; 
       z-index:-1; 
       width:500px; 
       height:200px; 
      } 
      .content{ 
       position:relative; 
       z-index:1; 
      } 
      p{ 
       color:#fff; 
      } 
     </style> 
    </head> 
    <body> 
     <img class="bgimage" src="http://www.hdwallpapersarena.com/wp-content/uploads/2012/07/Download-Hulk-HD-Wallpaper-For-Computer.jpg" /> 
     <div class="content"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum vestibulum elementum. Nunc cursus sem et odio porttitor bibendum. Nulla facilisi. Phasellus egestas sodales sapien, ut ullamcorper metus aliquam ac. Sed tellus ipsum, mattis nec vulputate non, ultrices vel mi. Etiam sodales porta nibh, dignissim porta eros viverra in. Nullam non augue lacus. Nullam et neque a arcu pellentesque mattis quis semper lectus. Ut a urna velit. Integer elementum, eros eu ullamcorper pretium, nisl est congue nibh, in aliquam risus massa nec lacus. Praesent blandit felis massa, ut suscipit lacus. Pellentesque sodales nulla at enim lobortis egestas ac ac urna. Pellentesque varius, erat ut mattis sodales, augue nisi luctus nibh, id ultrices lectus lectus feugiat mauris. 
      </p> 
     </div> 
    </body> 
</html>

...

출처

2013-02-21 04:49:22 Ryxle

어떻게 도움이되는지 잘 모르겠습니다 ... 제가 게시 한 javascript가 새로 고침 될 때마다 CSS 배경 이미지의 크기를 조정하고 싶습니다. – user1877401

신경 쓰지 마라, 알았다. CSS 본체에서 배경 크기를 변경해야합니다. { – user1877401

OK, 죄송합니다. CSS2를 사용하여 배경 이미지 크기를 변경할 수 없습니다. 그러나 CSS3에서는'background-size'를 사용하여 크기를 변경할 수 있습니다. 내 솔루션에서 내가 보여주고 싶은 것은 당신이 별도의'img' 태그를 사용할 수 있고, 바디 배경 이미지를 변경하는 대신 코드에서'img' 태그 src 속성을 변경하고 원하는 너비와 높이를 줄 수 있다는 것입니다. . – Ryxle

당신은 CSS3 또는 jQuery를 함께 코딩의 약간의 미디어 쿼리를 사용하여 시도 할 수 있습니다. 이 당신에게 도움이 될 수 https://developer.mozilla.org/en-US/docs/CSS/Media_queries

희망

출처

2013-02-21 04:59:30 Feroz

자바 스크립트의 크기 변경 배경 이미지

답변

관련 문제