简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집> 웹 프론트엔드> CSS 튜토리얼> 본문

CSS로 페이지 배경색을 설정하는 방법

醉折花枝作酒筹
풀어 주다： 2021-04-20 09:51:29
원래의
5839명이 탐색했습니다.

CSS에서는 "배경색" 속성을 사용하여 페이지 배경색을 설정할 수 있으며 구문은 "배경색: 색상 값"입니다. background-color 속성은 요소의 배경색을 설정합니다. 이는 패딩과 테두리(여백 제외)를 포함한 요소의 전체 크기입니다.

CSS로 페이지 배경색을 설정하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

페이지 배경색 설정

CSS는 body 태그의 background-color 속성을 설정하여 구현됩니다. 배경색은 주로 페이지의 테마를 강조하며 전경 텍스트 색상과 일치합니다. 구체적인 설정 방법은 텍스트 색상 값 설정과 동일하며, Hexadecimal, RGB 구성 요소 또는 색상의 영어 단어를 사용할 수 있습니다.

   背景颜色   

   春 
季，地球的北半球开始倾向太阳，收到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁移，离开越冬地向繁衍地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。
 
对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，收到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁移，离开越冬地向繁衍地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。
로그인 후 복사

코드는 위와 같습니다. 배경색은 짙은 녹색이고 텍스트 색상은 밝은 녹색입니다. 그림과 텍스트 내용 자체가 봄에 만물이 부활한다는 것을 보여줍니다.

배경색을 사용하여 페이지를 블록으로 나누세요

Background-color 속성은 페이지의 배경색을 설정할 수 있을 뿐만 아니라 거의 모든 HTML 요소의 배경색을 설정할 수 있습니다. 따라서 많은 웹페이지에서는 서로 다른 배경색을 설정하여 차단 효과를 얻습니다.

   利用背景颜色分块   

  

         로그인 후 복사
        
코드는 위와 같습니다. 상단 배너, 왼쪽 탐색바, 가운데 텍스트 부분은 각각 3가지 배경색을 사용하여 페이지 분할 목적을 달성합니다. 이 분할 방법은 웹 페이지 제작에서 자주 사용됩니다.
여기서 상단의 배너 사진은 왼쪽에서 오른쪽으로 색상 그라데이션이 있는 사진일 수 있으며, 색상이 사진 자체에서 페이지 배경 색상으로 전환되어 매우 자연스럽게 나타납니다. Photoshop에서도 웹페이지 제작에 흔히 사용되는 방식입니다.
추천 학습:css 비디오 튜토리얼
위 내용은 CSS로 페이지 배경색을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

      

       관련 라벨：
       

        css
        背景
       

      

      

       원천：php.cn
      

     

      이전 기사：블록 요소를 인라인 요소로 변환하는 방법
      다음 기사：CSS에서 취소선을 설정하는 방법
     

      

       본 웹사이트의 성명
      

      

       본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
      

     

      

       저자별 최신 기사
      

      
     

      

       최신 이슈
      

      

       

        

         WordPress 6.0(add_editor_style)은 Gutenberg 편집기에서 style.css를 로드하지 않습니다.
         저는 맞춤형 WordPress 블록 테마를 만들기 위해 UdemyWordPress 과정을 수강하고 있습니다. function.php에 블록 유형을 성공적으로 등록...
         

          

           에서 2023-11-12 20:37:50
          

          

           

            0
           

           

            2
           

           

            261
           

          

         

        

       

       

       

        

         큰 숫자에서는 작동하지 않는 소수의 CSS 선행 0
         최근에 100개가 넘는 목록 항목이 포함된 순서가 지정된 목록을 생성하는 문제에 직면했습니다. 나는 list-style:decimal-leading-zero;ol...
         

          

           에서 2023-11-07 10:35:53
          

          

           

            0
           

           

            1
           

           

            236
           

          

         

        

       

       

       

        

         Sass 오류: 파일이 이미 로드되었습니다: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss
         저는 퀘이사 프레임워크를 사용하고 있으며 프로젝트를 컴파일하는 동안 위의 오류 모듈 빌드 실패(./node_modules/sass-loader/dist/cjs.j...
         

          

           에서 2023-11-06 21:38:55
          

          

           

            0
           

           

            1
           

           

            219
           

          

         

        

       

       

       

        

         HTML/CSS에 배경 비디오를 삽입하는 방법은 무엇입니까?
         안녕하세요 여러분, 최근에 문제가 발생했습니다. 내 웹사이트에 비디오 배경을 설정하려고 하는데 중앙에 있는 텍스트가 맨 아래까지 계속 실행됩니다. 이유는 모르겠지...
         

          

           에서 2023-11-06 13:59:13
          

          

           

            0
           

           

            1
           

           

            240
           

          

         

        

       

       

       

        

         JavaScript에서 색상이라는 CSS/HTML의 RGB 값을 얻는 방법
         [name-rgb]라는 Javascript 개체를 만들었습니다. 기본: 명명된Colors={AliceBlue:[240,248,255],AntiqueWhite:[2...
         

          

           에서 2023-11-06 09:05:50
          

          

           

            0
           

           

            2
           

           

            210
           

          

         

        

       

       

      

     

      

       

        관련 주제
       

       더>
      

      

       
      

     

    

     

      인기 추천
     

     

      
     

    

    

     

      

       인기 튜토리얼
      

      더>
     

     

      

       

        관련 튜토리얼
        

       

       

        인기 추천
        

       

       

        최신 강좌
        

       

      

      
      
      
     

    

    

     

      

       최신 다운로드
      

      더>
     

     

      

       

        웹 효과
        

       

       

        웹사이트 소스 코드
        

       

       

        웹사이트 자료
        

       

       

        프론트엔드 템플릿
        

       

      

      
      
      
      
     

    

   

   

    

     

      

       

        회사 소개
        부인 성명
        Sitemap
        

       

       

        PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！
       

      

     

    

   

  
 
  
 
  

首页

分类讨论 

谈天说地

精华区 

我的信箱

休闲娱乐 

立即注册

离开本站 		 正文内容……