CSS 배경 이미지를 적용하는 방법
- anonymity원래의
- 2019-05-28 15:06:488480검색
선명하고 아름다운 배경 사진은 웹 페이지에 많은 포인트를 더할 수 있습니다. 디자이너들은 종종 페이지 배경에 큰 사진을 사용합니다. 우리는 사진이 해상도에 따라 변형되는 것을 원하지 않습니다. 큰 화면에서는 배경에 흰색 패치가 있습니다. 즉, 변형 없이 화면 크기에 적응할 수 있는 큰 배경 이미지를 달성하고 스크롤 막대가 스크롤될 때 배경 이미지가 스크롤되지 않아 적응을 실현합니다. 배경 이미지의
다음은 CSS로 구현하는 방법입니다.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>title</title>
</head>
<body>
<div class="wrapper">
<!--背景图片-->
<div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
<!--其他代码 ... -->
</div>
</body>
</html>CSS:
#web_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}이제 CSS에서 각 코드 줄의 역할이 무엇인지 분석해 보겠습니다.
position:fixed; top: 0; left: 0;
이 세 가지입니다. line 전체 div를 화면 상단과 왼쪽에 고정하는 것입니다
width:100%; height:100%; min-width: 1000px;
위의 처음 두 문장은 전체 화면 효과를 내기 위해 전체 div를 화면과 같은 크기로 만들고 min- width 는 1000px 이내의 화면 너비를 달성하는 것입니다. div의 크기는 변경되지 않습니다. 즉, 이 경우 화면 너비를 조정할 때 이미지의 크기가 조정되지 않습니다(1000px 이내에서만 유효함).
z-index:-10;
이 목적은 HTML 페이지의 각 레벨 아래에 전체 div를 만드는 것입니다. 일반적인 상황에서는 처음 생성된 레벨의 z-index 값이 0이므로 여기에 -1을 쓰면 될 수도 있습니다. 하지만 여기에서 -10을 쓰는 것은 전체 div가 맨 아래에 있도록 하기 위한 것입니다. 왜냐하면 페이지에 너무 많은 레벨이 있는 경우 때로는 -1을 사용하는 것이 반드시 맨 아래에 있지 않을 수도 있기 때문입니다. -100과 같이 큰 숫자로 표기됩니다. 배경 이미지처럼 보이도록 하려면 index:-10을 사용하세요. 실제로 가장 일반적인 div이지만 계층 관계가 배경 이미지처럼 보이도록 변경되었습니다.
background-repeat: no-repeat;
위는 배경입니다. 반복하지 마세요
background-size: cover; -webkit-background-size: cover; -o-background-size: cover;
위 세 문장은 같은 의미로 화면 크기에 맞춰 사진 크기를 동기화하지만 일부 부분이 잘릴 수 있지만 그렇지 않습니다. 다음 두 문장은 Chrome 및 Opera 브라우저와 호환됩니다.
background-position: center 0;
위 문장은 사진의 위치를 의미하며 중앙에 왼쪽으로 정렬됩니다.
위 내용은 CSS 배경 이미지를 적용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!