집 > 기사 > 웹 프론트엔드 > CSS로 배경 이미지를 설정하는 방법은 무엇입니까? 배경 속성은 배경 이미지를 추가합니다.

CSS로 배경 이미지를 설정하는 방법은 무엇입니까? 배경 속성은 배경 이미지를 추가합니다.

青灯夜游원래의: 2018-09-18 11:24:33237280검색

프론트엔드 개발 과정에서 페이지 미관을 위해 HTML 페이지에 배경 이미지를 추가하는 경우가 많습니다. 그렇다면 CSS를 사용하여 이미지를 html의 배경으로 설정하는 방법은 무엇입니까? 이번 장에서는 CSS를 사용하여 배경 이미지를 설정하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

권장 매뉴얼：CSS 온라인 매뉴얼

CSS에서 배경 이미지를 설정하는 방법은 무엇입니까?

css 배경 속성은 배경 색상이나 배경 이미지를 구체적으로 설정하는 속성입니다.

배경에 설정할 수 있는 속성을 살펴보겠습니다.

배경색: 색상으로 사용할 배경을 지정합니다.
Background-position: 배경 이미지의 위치를 지정합니다.
Background-size: 배경 이미지의 크기를 지정합니다.
Background-repeat: 배경 이미지를 반복하는 방법을 지정합니다.
Background-origin: 배경 이미지의 위치 지정 영역을 지정합니다.
Background-clip: 배경의 그리기 영역을 지정합니다.
Background-attachment: 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지 지정합니다.
Background-image: 사용할 배경 이미지를 지정합니다.

background-image 속성은 html 페이지에 대한 배경 이미지 속성을 설정하는 것임을 알 수 있습니다.

background-image:url(CSS로 배경 이미지를 설정하는 방법은 무엇입니까? 배경 속성은 배경 이미지를 추가합니다.);

이 방법으로 url()에 이미지 경로를 제공하면 div 상자에 대한 배경 이미지를 설정할 수 있습니다. 간단해 보이지만 한 가지 주목할 점은 배경 이미지 설정 상자에 상당한 내용이 있어야 한다는 것입니다. 너비와 높이를 설정하여 배경 이미지를 디스플레이에 표시할 수 있습니다.

위의 배경 속성을 하나씩 설정하는 것이 번거롭다면 실제로 일부 속성을 함께 설정하면 CSS 파일을 저장하고 최적화할 수 있습니다. 예:

background:url(bgimg.gif) no-repeat 5px 5px;

은 다음과 같이 설명됩니다.

CSS로 배경 이미지를 설정하는 방법은 무엇입니까? 배경 속성은 배경 이미지를 추가합니다.

추천 관련 기사: #🎜 🎜 # 1.
CSS에서 배경 이미지를 타일링하는 방법은 무엇인가요? CSS 배경 이미지를 타일링하는 네 가지 방법 소개 2.
html배경 이미지를 추가하고 이미지 타일을 전체 페이지로 만드는 방법은 무엇입니까? (코드 예시) 3.
CSS에서 고정된 배경 이미지를 얻는 방법
관련 동영상 추천: 1.
CSS 동영상 튜토리얼-Jade Girl Heart Sutra Edition

#🎜🎜 ## 🎜🎜#배경 이미지 설정을 위한 CSS 코드 예시

1.css 배경 이미지를 적응형 전체 화면으로 설정

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片设置</title>
		<style>
			.demo{
				position:fixed;
				top: 0;
				left: 0;
				width:100%;
				height:100%;
				min-width: 1000px;
				z-index:-10;
				zoom: 1;
				background-color: #fff;
				background: url(2.png);
				background-repeat: no-repeat;
				background-size: cover;
				-webkit-background-size: cover;
				-o-background-size: cover;
				background-position: center 0;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

#🎜 🎜#Rendering:

다음은 CSS 스타일의 역할에 대한 자세한 분석입니다.

CSS로 배경 이미지를 설정하는 방법은 무엇입니까? 배경 속성은 배경 이미지를 추가합니다.

position:fixed;  
top: 0;  
left: 0;

# 🎜🎜#이 세 문장은 화면 상단과 왼쪽에 있는 div.demo 상자 전체를 수정하는 것입니다.

width:100%;  
height:100%;

전체 div를 화면 크기와 동일하게 만들어 전체 화면 효과를 내기 위한 것입니다.

min-width: 1000px;

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;

이 CSS 스타일은 배경 이미지가 반복되지 않도록 설정하는 것입니다. 예제는 큰 이미지입니다. 단색(또는 점/줄무늬) 이미지인 경우 이미지는 다음과 같습니다. 전체 화면 효과를 얻으려면 전체 화면에 타일링(반복)하세요. (repeat-x는 가로 타일링,peat-y는 세로 타일링)

2.css 배경 이미지를 투명하게 설정

원본 이미지: #🎜 🎜## 🎜🎜#

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片设置</title>
		<style>
			.demo{
				width: 600px;
				height: 200px;
				background:url(CSS로 배경 이미지를 설정하는 방법은 무엇입니까? 배경 속성은 배경 이미지를 추가합니다.) no-repeat;
				
			}
			.demo1{
				width: 100%;
				height: 100%;
				background-color: rgba(255,255,255,0.5);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
		</div>
	</body>
</html>

Rendering:

CSS로 배경 이미지를 설정하는 방법은 무엇입니까? 배경 속성은 배경 이미지를 추가합니다. Principle: 흰색 레이어를 겹칩니다. 배경 이미지 투명 div 상자

이 방법은 브라우저 호환성이 좋으며 투명한 div 상자에 텍스트를 추가하여 그림은 투명하지만 텍스트는 불투명한 효과를 얻을 수 있습니다.