CSS 스타일에 배경 이미지를 삽입하는 방법
- 青灯夜游원래의
- 2020-12-18 11:10:5621251검색
CSS에서는 background-image 또는 background 속성을 사용하여 배경 이미지를 삽입할 수 있습니다. 기본 구문 형식은 "Background-image/Background:url('URL')"이며 매개변수 URL은 배경 이미지를 지정하는 데 사용됩니다. 배경 이미지의 경로입니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5+CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
추천: "css 비디오 튜토리얼"
css에서는 background-image 또는 background 속성을 사용하여 배경 이미지를 삽입할 수 있습니다.
배경 이미지 속성
배경 이미지 속성은 요소의 배경 이미지를 설정합니다. 요소의 배경은 패딩과 테두리(여백은 제외)를 포함한 요소의 전체 크기입니다.
구문:
background-image:url('URL'));
url('URL') 이미지의 URL
기본적으로 배경 이미지는 요소의 왼쪽 상단에 배치되며 수직 및 수평 방향을 반복합니다.
팁: 배경 이미지를 사용할 수 없는 경우 배경 리본을 대신 사용할 수 있도록 사용 가능한 배경 색상을 설정하세요.
배경 속성
배경 속성은 배경색이나 배경 이미지를 구체적으로 설정하는 속성입니다.
배경 속성은 하나의 명령문으로 모든 배경 속성을 설정할 수 있는 단축 속성입니다.
설정할 수 있는 속성은 다음과 같습니다.
background-color: 사용할 배경색을 지정합니다.
background-position: 배경 이미지의 위치를 지정합니다.
background-size: 배경 이미지의 크기를 지정합니다.
background-repeat: 배경 이미지를 반복하는 방법을 지정합니다.
background-origin: 배경 이미지의 위치 지정 영역을 지정합니다.
background-clip: 배경의 그리기 영역을 지정합니다.
background-attachment: 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지 지정합니다.
background-image: 사용할 배경 이미지를 지정합니다.
예 : :
background:url(bgimg.gif) no-repeat 5px 5px;as는 다음 그림에 설명되어 있습니다.
백 ground 이미지 예 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片设置</title>
<style>
.demo1{
width: 400px;
height: 200px;
background-color: #fff;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.demo2{
width: 400px;
height: 200px;
background:#fff url(bg.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="demo1"></div><br />
<div class="demo2"></div>
</body>
</html>
위 내용은 CSS 스타일에 배경 이미지를 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!