CSS를 사용하여 배경색과 이미지를 설정하는 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 배경색과 이미지를 설정하는 방법

不言

풀어 주다： 2021-04-21 17:19:29

원래의

7155명이 탐색했습니다.

CSS로 배경색과 이미지를 설정하는 방법: 1. background-color 속성을 통해 배경색을 설정합니다. 2. background-image 속성을 통해 배경 이미지를 설정합니다.

CSS를 사용하여 배경색과 이미지를 설정하는 방법

이 문서의 운영 환경: 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>

로그인 후 복사

실행 결과

브라우저에 지정된 색상으로 다음과 같은 효과가 나타납니다. 하늘색을 배경색으로 설정

CSS를 사용하여 배경색과 이미지를 설정하는 방법

배경이미지를 사용하여 배경이미지를 설정합니다

코드는 다음과 같습니다

<!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>

로그인 후 복사

런닝 효과는 아래 그림과 같습니다

CSS를 사용하여 배경색과 이미지를 설정하는 방법