웹 사이트의 일부에서만 표지 이미지로 사진 사용

css를 사용하여 웹 사이트의 일부에 배경 사진을 추가하려고합니다. 나는 사진을 "표지"로 설정하여 방문자의 브라우저가 스트레치하고 크기를 조정할 수 있도록하고 싶습니다.웹 사이트의 일부에서만 표지 이미지로 사진 사용

문제는 웹 사이트를 두 부분으로 나누고 싶습니다. #top 및 #bottom입니다. 위쪽 절반은 약 79 %이고 아래쪽은 21 %입니다. #top 부분은 "표지"사진을 포함하지만 아래쪽 절반은 특정 배경색을 갖습니다.

제 문제는 IE의 현재 설정 인 "정렬"이 IE에서 약간 효과가 있지만 Firefox와 Chrome에는 적합하지 않습니다. 나는 많은 다른 것들을 시도했지만, 제대로 할 수는 없습니다.

Firefox 및 Chrome에서는 IE에서 사진이 실제로 의도대로 작동하고 #top 부분을 채우는 반면, "표지"사진은 하단 배경에 클립됩니다.

<html> 
<head> 
    <title>Test</title> 
    <style> 
     html { 
      width:100%; 
      height:100%; 
      color:white; 
     } 

     body { 
      height:100%; 
      width:100%; 
     } 

     #top { 
      background: url(PZwx1) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/BV-site-bgfoto.jpg', sizingMethod='scale'); 
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/BV-site-bgfoto.jpg', sizingMethod='scale')"; 
      height:79%; 
     } 

     #bottom {background: #F9525F;height:21%;}enter code here 
    </style> 
</head> 
<body> 
    <div id="top"></div> 
    <div id="bottom"></div> 
</body> 
</html>

여기 예제를 작성했습니다. http://www.webdevout.net/test?02X

어떤 도움을 주셔서 감사합니다!

출처

2012-11-07 Roy Jacobs

"배경 : 고정"(페이지 높이의 100 %를 사용하는 것)을 제거하고 "표지"대신 "100 % 100 %"를 사용하십시오. 그렇게해야합니다. fixed이 중요

#top { 
     background: url(lalala.jpg) no-repeat center center; 
     background-size:100% 100%; 
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale'); 
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale')"; 
     height:79%; 
    }

경우, background-size:100% 79%를 사용하여 정성 들여위한 background:center

#top { 
     background: url(lalala.jpg) no-repeat top fixed; 
     background-size:100% 79%; 
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale'); 
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale')"; 
     height:79%; 
    }

(또한, 몸에 padding:0,margin:0 추가) 마법처럼

출처

2012-11-07 22:27:08 Kraz

작품 background:top에 감사를 변경 문제 해결! –

웹 사이트의 일부에서만 표지 이미지로 사진 사용

답변

관련 문제