CSS 배경색, 이미지 배경 이미지-HTML 튜토리얼-php.cn

배경색 배경색

구문:

배경색:

기본값 : transparent Transparent

적용 대상 : 모든 요소

상속 : 없음

애니메이션 : 예

계산된 값: 지정된 값

값:

: 지정된 색상.

설명:

객체의 배경색을 설정하거나 검색합니다.

배경색과 배경 이미지가 모두 정의된 경우 배경 이미지가 배경색과 겹쳐집니다.
<' background-image '>를 설정한 경우 배경 이미지가 보이지 않을 때 텍스트 색상과 일정한 대비를 유지하는 것도 좋습니다.
에 해당하는 스크립트 속성은 BackgroundColor입니다.

배경이미지

구문:

배경 이미지: [ ,

= | 없음

기본값: 없음

적용 대상 : 모든 요소

상속: 없음

애니메이션성: 아니요

계산된 값: 지정된 값

값 :

없음: 배경 이미지가 없습니다.
: 절대 또는 상대 주소를 사용하거나 그라데이션 색상을 만들어 이미지를 식별합니다.

설명:

객체의 배경 이미지를 설정하거나 검색합니다.

<' background-image '> 대비가 보이지 않습니다.
여러 세트의 배경 이미지가 정의되어 있고 배경 이미지가 겹치는 경우 앞에 쓰여진 이미지가 뒤에 쓰여진 이미지 위에 겹쳐집니다.
에 해당하는 스크립트 기능은 배경이미지입니다.

background-image: url(“http://static.criteo.net/flash/icon/nai_small.png”) // 전체 URL 경로

배경 이미지: url(“/flash/icon/nai_small.png”); // 루트 경로

배경 이미지: url(“../nai_small.png”) // 상대 CSS 파일 경로

배경 이미지: url(../nai_small.png); //따옴표를 쓰지 마세요

배경 이미지: url('../nai_small.png' ); // 작은따옴표

백그라운드 반복

구문:

배경 반복：<반복 스타일> [ , <반복 스타일> ]*

<반복 스타일> = 반복- x | 반복-y | 공백 | 라운드} 기본값 >:

반복 적용 대상 : 모든 요소

상속 : 없음

애니메이션 : 없음

계산된 값 : 지정된 값

값:

repeat-x: 배경 이미지가 가로로 타일링됩니다.

repeat-y : 배경 이미지가 수직으로 타일링됩니다.

반복 없음: 배경 이미지가 타일링되지 않습니다.
round: 배경 이미지의 크기가 맞고 채워질 때까지 자동으로 크기가 조정됩니다. 전체 컨테이너. (CSS3)
space: 배경 이미지가 동일한 간격으로 타일링되어 전체 컨테이너 또는 특정 방향을 채웁니다. (CSS3)


설명:

객체의 배경 이미지가 배치되고 채워지는 방식을 설정하거나 검색합니다. <' background-image '> 속성을 먼저 지정해야 합니다.

2개의 매개변수 제공을 허용합니다. 2개의 매개변수가 모두 제공되면 첫 번째 매개변수는 가로 방향에 사용되고 두 번째 매개변수는 세로 방향에 사용됩니다. 매개변수가 1개만 제공되면 가로, 세로에 사용됩니다.

에 해당하는 스크립트 기능은 BackgroundRepeat입니다.

콘텐츠 배경 첨부와 함께 배경이 스크롤됩니다

구문:

배경 첨부: [ , ]*

= 고정 | 스크롤 | 로컬

기본값: 스크롤은 에 적용됩니다. : 모든 요소

상속: 없음

애니메이션: 아니요

계산된 값: 지정된 값

값 가져오기:

고정: 배경 이미지가

양식

스크롤: 배경 이미지는 요소 를 기준으로 고정됩니다. 즉, 배경 이미지는 항상 요소 자체를 따르기 때문에 요소 콘텐츠가 스크롤될 때 배경 이미지가 스크롤되지 않습니다. 그러나 요소의 상위 요소나 양식과 함께 스크롤됩니다.
local: 배경 이미지는 요소 의 콘텐츠를 기준으로 고정됩니다. 즉, 요소가 요소와 함께 스크롤되면 배경 이미지도 항상 콘텐츠를 따르기 때문에 배경 이미지도 스크롤됩니다. (CSS3)
설명:

배경 이미지가 개체 내용과 함께 스크롤되는지 아니면 고정되는지를 설정하거나 검색합니다. <' background-image '> 속성을 먼저 지정해야 합니다.

에 해당하는 스크립트 기능은 BackgroundAttachment

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="utf-8"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>background-attachment 背景跟着内容动<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span>
<span style="color: #800000; background-color: #f5f5f5">
    .parent</span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
        height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 2000px</span><span style="color: #000000; background-color: #f5f5f5">;</span>
    <span style="color: #000000; background-color: #f5f5f5">}</span><span style="color: #800000; background-color: #f5f5f5">

    .sample</span><span style="color: #000000; background-color: #f5f5f5">{</span><span style="color: #ff0000; background-color: #f5f5f5">
    
        overflow</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> scroll</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        font-size</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 22px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        margin</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 200px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        width</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 230px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        height</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 200px</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        border</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> 2px solid black</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        background-image</span><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> url(red.png)</span><span style="color: #000000; background-color: #f5f5f5">;</span><span style="color: #ff0000; background-color: #f5f5f5">
        <strong><font style="background-color: #ffff00">background-attachment</font></strong></span><strong><font style="background-color: #ffff00"><span style="color: #000000; background-color: #f5f5f5">:</span><span style="color: #0000ff; background-color: #f5f5f5"> <font style="background-color: #ffff00">local</font></span></font><font style="background-color: #ffff00"><span style="color: #000000; background-color: #f5f5f5">;</span></font></strong>
    <span style="color: #000000; background-color: #f5f5f5">}</span>
    <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="parent"</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="sample"</span><span style="color: #0000ff">></span><span style="color: #000000">
Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 
</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

로그인 후 복사