바둑판 식으로 배열 할 수없는 이미지를 사용할 웹 사이트를 만들고 있습니다. 전체 배경 화면을 커버하려면이 이미지가 필요합니다. 그러나, 나는 이것을 작은 모니터뿐만 아니라 큰 모니터에서도 사용하기를 원합니다.큰 배경 이미지 및 화면 크기
큰 배경 이미지를 만들고 background-size을 사용하여 크기를 줄이거 나 다양한 크기의 동일한 이미지를 여러 버전으로 만들어야합니까? CSS3 Media Queries를 사용하여 어떤 이미지를 표시할지 선택해야합니까? 그렇다면 화면 크기에서 어떤 중단 점을 사용해야합니까?
나는 StatCounter 정보를 바탕으로 다섯 중단 선택 결국 :
이이 번호, 내 테스트를 기반으로 2012 년 12 월
까지 최대입니다, 다른 사람에게 말하기 I 다음 옵션을 선택하십시오.
/*Monitors Large than 1920px, image has "soft" edges to blend into background */
@media (min-width:1921px){
html, body{
background: url(/images/backgrounds/1920-bg-large.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
}
}
/* Mointores ranging from 1367px - 1920px */
@media (min-width:1367px) and (max-width:1920px){
html, body{
background: url(/images/backgrounds/1920-bg.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
}
}
/* Mointores ranging from 769px - 1366px */
@media (min-width:769px) and (max-width:1366px){
html, body{
background: url(/images/backgrounds/1366-bg.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
}
}
/* Tablets like the iPad 2 and iPad Mini */
@media (max-width:768px){
html, body{
background: url(/images/backgrounds/768-bg.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
}
}
/* At a certain point the Background images become irrelevant as they are hidden behind other elements. Changed to a solid BG */
@media handheld, only screen and (max-width: 640px) {
html, body{
background:#190303;
}
}
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:100% 100%;
}
이렇게하면 모든 화면의 모든 브라우저에서 확장됩니다.
나는 모두에 큰 것을 사용하려고합니다.
background-size 속성을 contain 또는 cover으로 설정할 수 있습니다. 이것은 스케일링 유물이 그리 명확하지 않은 사진 배경 (패턴과 반대)에서 특히 잘 작동합니다.
cover 대 IE8과 (단지 연신 된 배경은 충분합니다)에서 대체 규칙을 설정하는 방법에 대한 기억하십시오.
두 가지 방법을 모두 사용하는 것이 좋습니다. 두 이미지 (예 : width = 500px 및 width = 1500px)를 준비하고 화면 너비가 750보다 작 으면 500px를 사용하고 메모리가 부족하고 대역폭이 제한되어있는 태블릿부터 1500px를 사용해야합니다. 또한 css로 화면에 맞 춥니 다. – benbai123