집 > 기사 > 웹 프론트엔드 > 브라우저가 확대/축소될 때 배경 이미지의 크기를 변경하지 않는 코드를 구현하기 위해 CSS를 사용하는 두 가지 방법

브라우저가 확대/축소될 때 배경 이미지의 크기를 변경하지 않는 코드를 구현하기 위해 CSS를 사용하는 두 가지 방법

不言원래의: 2018-06-11 16:07:122303검색

이 글에서는 브라우저 확대/축소에 따라 배경 이미지의 크기가 변하지 않는다는 것을 깨닫기 위해 CSS를 사용하는 두 가지 방법에 대한 코드를 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

일부 웹사이트의 경우 브라우저의 확대/축소에 따라 배경 이미지의 크기가 변하지 않습니다. 이 예에서는 브라우저의 확대/축소에 따라 배경 이미지의 크기가 변하지 않도록 CSS를 사용합니다. 이미지를 배경으로 사용합니다. 방법 2에서는 img 태그를 사용합니다. 좋아하는 친구들은 한번 보세요

Baidu Personal Edition 홈페이지와 같이 일부 웹사이트의 홈페이지 배경 이미지 크기는 브라우저 확대/축소로 변경되지 않습니다. :

또 다른 예는 Huaban.com(huaban.com )입니다.

이제 CSS를 사용하여 이 효과를 얻으세요.
우선, 위 바이두 배경 이미지의 크기는 1600*1000px(이미지 주소: http://4.su.bdimg.com/skin/12.jpg?2)로 충분히 큰 사진이 필요합니다. ; 꽃잎 배경 이미지 크기는 1600*1600px입니다(이미지 주소: http://hbfile.b0.upaiyun.com/img/unauth_page/food_bg.jpg).
그 다음 비스케일링 효과를 얻는 방법에는 두 가지가 있습니다. 배경 이미지:
방법 1. 그림을 배경으로 사용
다음과 같은 몇 가지 CSS 속성을 언급할 수 있습니다. background-size: Cover 이 CSS3 속성의 기능은 배경 이미지를 충분히 크게 확장하는 것입니다. 이미지가 배경 영역을 완전히 덮습니다. 배경 이미지의 특정 부분이 배경 위치 지정 영역에 표시되지 않을 수 있습니다. 이 속성을 사용하지 않고 IE11 및 FireFox에서 브라우저를 확대하면 배경 이미지가 그에 따라 축소됩니다. -webkit-Background-size: Cover 및 -o-Background-size를 동시에 사용합니다. : Cover는 웹킷 커널 브라우저 및 Opera 브라우저와 호환됩니다. background-attachment 속성은 배경 이미지가 고정되는지 아니면 나머지 부분과 함께 스크롤되는지를 설정합니다. 고정으로 설정하면 페이지의 나머지 부분이 스크롤될 때 배경 이미지가 이동하지 않습니다.
코드(바이두의 별하늘 지도를 사용하면 위의 바이두 스크린샷과 효과가 동일함):
HTML:

<p id="con"></p>

CSS:

body{ margin:0; padding:0;} 
#con{ 
position:absolute; 
top:0; 
left:0; 
height:100%; 
width:100%; 
background-image:url("maskimg/star.jpg"); 
background-position: center 0; 
background-repeat: no-repeat; 
background-attachment:fixed; 
background-size: cover; 
-webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */ 
-o-background-size: cover;/* 兼容Opera */ 
zoom: 1; 
}

방법 2. 이미지를 배경으로 사용하지 말고 <를 사용하세요. ;img> tag , 브라우저가 확대되어도 이미지 크기가 변하지 않는 효과가 있지만 수직 스크롤 막대가 있으면 이미지가 고정되지 않고 스크롤 막대와 함께 이동합니다. 이미지 너비를 100%로 설정하면 됩니다.
코드는 Baidu의 별이 빛나는 하늘 지도를 사용하여 매우 간단합니다.
HTML:

<p id="con"><img id="pic" src="maskimg/star.jpg"></p> _fcksavedurl=""maskimg/star.jpg"></p>"

CSS:

body{ margin:0; padding:0;} 
#pic{ width:100%;}

위는 이 기사의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 콘텐츠 PHP 중국어 웹사이트에 주목하세요!

브라우저가 확대/축소될 때 배경 이미지의 크기를 변경하지 않는 코드를 구현하기 위해 CSS를 사용하는 두 가지 방법

관련 기사