CSS의 배경 관련 속성은 무엇입니까? CSS 배경 속성 소개-CSS 튜토리얼-php.cn

CSS의 배경 관련 속성은 무엇입니까? CSS 배경 속성 소개

不言

풀어 주다： 2018-08-18 13:45:05

원래의

5459명이 탐색했습니다.

CSS 배경과 관련된 속성은 무엇인가요? 다음 글에서는 CSS 배경 속성에 대해 소개하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. CSS 배경 속성은 콘텐츠의 배경색을 설정합니다: background-color 속성: 색상; 상속; 상위 스타일

box.html

<!doctype html>
<html>
<head>
    <mate charset="utf-8">
    <title>背景</title>
    <link href="box.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <p为内容设置背景色：background-color；</p>
    </body>
    </html>

로그인 후 복사

box.css

body{    
background-color:#123456;
}

로그인 후 복사

2을 상속합니다. CSS 배경 속성은 콘텐츠의 배경을 이미지 background-image로 설정합니다.

box.css

body{
    background-color:#123456;    
    background-image:url(image.png);
    }

로그인 후 복사

3. CSS 배경 속성의 배경 이미지 배경 첨부 수정

(CSS의 background-attachment 속성을 사용하여 브라우저의 이미지를 수정합니다. 스크롤 막대를 드래그하면 배경 이미지가 스크롤과 함께 스크롤되지 않습니다. , 그림 위에 떠 있는 텍스트와 같습니다. 속성 값: 스크롤, 기본값
고정됨, 배경 이미지는
상속됨; 상위 클래스 스타일

box.css

body{
    background-color:#123456;    
    background-image:url(image.png);    
    background-attachment:fixed;    
    font-size: 45px;
    }

로그인 후 복사

4 , CSS 배경 속성 배경 이미지 타일 배경 반복

속성 값: 반복;타일 배경 이미지;기본값 반복하지 마세요. 이미지를 타일링하지 마세요.
가로로 x;타일 반복
repert-y; 수직 방향 타일

box.css

 body{
     background-color:#123456;    
     background-image:url(image.png);    
     background-attachment:fixed;    
     font-size: 45px;    
     background-repeat: repeat-y;    
}

로그인 후 복사

5. CSS 배경 속성 배경 이미지 위치 지정

속성 값: top center
bottom;
left;Left
inherit;상위 클래스 스타일 상속
스타일:
xxxpx,xxxpx; xxx%,xxx%; xxxpx,top;

box.css

body{
    background-color:#123456;    
    background-image:url(image.png);    
    background-attachment:fixed;    
    font-size: 45px;    
    background-repeat:no-repeat;    
    background-position:left;
    }

로그인 후 복사