CSS를 사용하여 배경색과 이미지를 설정하는 방법
- 不言원래의
- 2018-12-08 16:33:227110검색
CSS로 배경색과 이미지를 설정하는 방법: 1. background-color 속성을 통해 배경색을 설정합니다. 2. background-image 속성을 통해 배경 이미지를 설정합니다.
이 문서의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
CSS를 사용하여 배경을 설정하려면 background 속성을 사용해야 하며, 배경색과 배경 이미지를 CSS로 설정하는 구체적인 방법을 살펴보겠습니다.
먼저 CSS 설정 배경색
배경색을 변경하려면 background-color를 사용해야 합니다
background-color:value（颜色编码或者颜色名称）
값 섹션에 #000000과 같은 색상 코드나 색상 이름을 입력할 수 있습니다. 흰색으로 설정한 색상은 배경색입니다.
background-color의 초기 값은 투명하며, 이 경우 상위 요소의 배경색이 적용됩니다. 상위 요소에 설정이 없으면 흰색으로 변합니다.
CSS 이미지 배경 설정
background-image 속성을 사용하면 서버에 업로드되는 이미지를 배경으로 미리 설정할 수 있습니다.
background-image: url("图像的路径");url에는 배경으로 사용하고 싶은 이미지 파일의 경로를 입력해주세요. CSS 파일과 이미지 파일이 같은 디렉터리에 있으면 파일 이름만 사용해도 됩니다.
절대 경로와 상대 경로 모두 이미지 파일 경로로 사용할 수 있습니다.
상대 경로를 입력하려면 html 파일의 상대 경로가 아닌 외부 스타일 시트의 상대 경로를 입력하세요.
그럼 구체적인 예를 살펴보겠습니다
배경색을 사용하여 배경색을 설정합니다
코드는 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-color: skyblue;
}
</style>
</head>
<body>
<p>CSS를 사용하여 배경색과 이미지를 설정하는 방법设置</p>
</body>
</html>실행 결과
브라우저에 지정된 색상으로 다음과 같은 효과가 나타납니다. 하늘색을 배경색으로 설정
배경이미지를 사용하여 배경이미지를 설정합니다
코드는 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-image: url("img/t.jpg");
}
</style>
</head>
<body>
<p>CSS를 사용하여 배경색과 이미지를 설정하는 방법设置</p>
</body>
</html>런닝 효과는 아래 그림과 같습니다
화면 크기가 커질 때 배경 이미지보다 크면 기본적으로 배경 이미지가 자동으로 반복됩니다. 이 설정은 background-repeat 속성을 사용하여 변경할 수 있습니다.
배경 이미지 표시는 초기 설정의 왼쪽 상단에서 시작됩니다. 이 설정은 background-position 속성을 사용하여 변경할 수 있습니다
위 내용은 CSS를 사용하여 배경색과 이미지를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!