CSS의 배경(색상, 위치, 이미지, 반복, 첨부) - Html 요소의 배경색 또는 배경 이미지를 설정하는 모든 것입니다. CSS의 텍스트 색상 및 배경색

부동산을 사용하지 않는 사이트가 하나도 없는 것 같아요 CSS 배경. 이 속성보다 더 간단한 것이 무엇일까요? 그러나 아니요, 그 기능은 페이지 배경으로 그림이나 색상을 일반적으로 할당하는 것보다 훨씬 더 넓습니다. 어떤 것들은 익숙할 것이고, 어떤 것들은 아마도 많은 사람들에게 새로운 것일 것입니다. 어쨌든 배경이 어떻게 작동하는지 철저하게 아는 것이 도움이 될 것입니다.

CSS3는 투명도, 여러 이미지를 배경으로 지정하는 등 속성에 많은 새로운 기능을 추가했습니다. 이에 대해서는 아래에서 설명하겠지만 먼저 속성의 기본 사항을 살펴보겠습니다. 배경.

배경색

나는 당신이 이미 배경색을 두 번 이상 지정했다고 확신합니다. 이는 일반(색상 이름이 사용됨), 16진수 또는 RGB 표기법 등 여러 유형의 표기법을 사용하여 수행할 수 있습니다. 각 유형은 동일하므로 가장 마음에 드는 것을 사용하세요. 가장 짧은 옵션을 사용하려고 노력하고 있으며, 쉽게 인식할 수 있도록 결과 스타일 파일의 크기가 조금 더 작아졌습니다.

P (배경색: 빨간색;) p (배경색: #f00;) p (배경색: #ff0000;) p (배경색: rgb(255, 0, 0;))

CSS3는 투명도를 지원하므로 다음과 같이 색상에 투명도를 추가할 수 있습니다.

P (배경색: rgba(255, 0, 0, 0.5);)

마지막 그림은 투명도를 50%로 설정했습니다. 투명도 값을 0(완전히 투명한 배경)에서 1(완전히 불투명함)까지 설정할 수 있습니다.

배경 이미지

이 속성은 배경에 이미지를 할당하는 데도 자주 사용됩니다. CSS3에는 여러 이미지를 배경에 할당하여 각각 자체 레이어를 생성하여 각 후속 이미지가 이전 이미지와 겹치는 기능이 추가되었습니다. 이것이 왜 유용할까요? 모든 것이 매우 간단합니다. 사이트의 각 모서리에 작은 장식을 나사로 고정해야 한다고 가정해 보겠습니다. 다소 고무적인 레이아웃을 고려할 때 하나의 이미지를 사용하는 것은 옵션이 아닙니다. 따라서 우리는 4개의 "레이어"를 만들고 각 이미지를 해당 모서리로 이동하면 문제가 해결됩니다.

본문(배경 이미지: url("image1"), url("image2"), url("image3"))

하나의 이미지를 배경에 할당해야 하는 경우 코드에 첫 번째 이미지만 남겨두는 것은 이해할 수 있다고 생각합니다.
이미지를 배경으로 사용할 때는 두 가지 규칙을 기억해야 합니다.

• 어떤 이유로 사용자가 이미지를 볼 수 없는 경우 대비되는 배경색을 설정합니다. 단순히 사진 표시를 꺼서 트래픽을 절약할 수 있습니다.
• 중요한 정보를 전달하기 위해 배경 이미지를 사용하지 마세요. 위에서 설명한 이유로 인해 사용자가 해당 내용을 보지 못할 수도 있습니다.

여러 배경 이미지에 대한 지원은 매우 광범위합니다. IE8을 포함한 모든 브라우저는 이 속성을 지원합니다.

저자로부터:여러분, 안녕하세요. 배경 색상과 이미지는 웹 디자인에서 큰 역할을 합니다. 이를 통해 모든 요소를 ​​더욱 매력적으로 디자인할 수 있습니다. 오늘은 HTML로 배경을 만드는 방법을 살펴보겠습니다.

HTML을 사용하여 배경을 설정할 수 있습니까?

나는 즉시 아니라고 말할 것이다. 일반적으로 html은 웹페이지를 디자인하기 위해 만들어진 것이 아닙니다. 정말 불편할 뿐입니다. 예를 들어, 배경색을 설정할 수 있는 bgcolor 속성이 있지만 이는 매우 불편합니다.

따라서 CSS(Cascading Style Sheets)를 사용하겠습니다. 배경을 설정할 수 있는 기회가 훨씬 더 많습니다. 오늘은 가장 기본적인 내용을 살펴보겠습니다.

CSS를 사용하여 배경을 설정하는 방법은 무엇입니까?

따라서 먼저 배경을 어떤 요소로 설정할지 결정해야 합니다. 즉, 규칙을 작성할 선택자를 찾아야 합니다. 예를 들어, 전체 페이지의 배경을 전체적으로 설정해야 하는 경우 본문 선택기를 통해 이를 수행하고 모든 블록에 대해 div 선택기를 통해 이를 수행할 수 있습니다. 글쎄요. 배경은 스타일 클래스, 식별자 등 다른 선택기에 바인딩될 수 있고 바인딩되어야 합니다.

선택자를 결정한 후에는 속성 자체의 이름을 작성해야 합니다. 배경색(즉, 그라데이션이나 이미지가 아닌 단색)을 설정하려면 background-color 속성을 사용하세요. 그 후에는 콜론을 넣고 색상 자체를 작성해야 합니다. 이것은 다양한 방법으로 수행될 수 있습니다. 예를 들어 키워드, 16진수 코드, rgb, rgba, hsl 형식을 사용합니다. 어떤 방법이든 가능합니다.

가장 일반적으로 사용되는 방법은 16진수 코드입니다. 색상을 선택하려면 색상 코드를 표시하는 프로그램을 사용할 수 있습니다. 예를 들어 Photoshop, 페인트 또는 일부 온라인 도구가 있습니다. 따라서 예를 들어 웹 페이지 전체에 대한 일반적인 배경을 작성하겠습니다.

본문(배경색: #D4E6B3; )

이 코드는 헤드 섹션에 삽입되어야 합니다. 파일이 동일한 폴더에 있는 것이 중요합니다.

배경으로 그림

이미지에는 작은 HTML 언어 아이콘을 사용하겠습니다.

식별자가 있는 빈 블록을 만들어 보겠습니다.

< div id = "bg" > < / div >

명시적인 크기와 배경을 지정해 보겠습니다.

#bg(너비: 400px; 높이: 250px; 배경 이미지: url(html.png); )

#bg( 너비: 400px; 높이: 250px; 배경 - 이미지 : url (html . png ) ;

이 코드에서 내가 새로운 속성인 background-image를 사용했다는 것을 알 수 있습니다. 이는 특히 html 요소에 배경으로 그림을 삽입하기 위한 것입니다. 무슨 일이 일어났는지 봅시다:

사진을 지정하려면 콜론 뒤에 키워드 url을 쓴 다음 괄호 안에 파일 경로를 표시해야 합니다. 이 경우 이미지가 html 문서와 동일한 폴더에 있다는 사실을 기반으로 경로가 지정됩니다. 이미지 형식도 지정해야 합니다.

이 작업을 완료했는데도 배경이 여전히 블록에 표시되지 않으면 이미지 이름을 올바르게 썼는지, 경로와 확장자가 올바르게 설정되었는지 다시 확인하세요. 브라우저가 이미지를 찾을 수 없기 때문에 배경이 나타나지 않는 가장 일반적인 이유는 다음과 같습니다.

그런데 한 가지 눈치채셨나요? 브라우저는 블록 전체에 이미지를 가져와 곱했습니다. 아시다시피 이는 배경 이미지의 기본 동작입니다. 블록에 들어갈 수 있는 한 수직 및 수평으로 반복됩니다. 이 동작을 통해 쉽게 제어할 수 있습니다. 이렇게 하려면 4가지 주요 값이 있는 background-repeat 속성을 사용하세요.

반복 – 기본값, 이미지가 양쪽에서 반복됩니다.

Repeat-x – x축에서만 반복합니다.

Repeat-y – y축을 따라서만 반복합니다.

반복 없음 – 전혀 반복하지 않습니다.

각 값을 작성하고 어떤 일이 발생하는지 확인할 수 있습니다. 나는 다음과 같이 쓸 것이다:

배경 반복: 반복-x;

배경 - 반복 : 반복 - x ;

이제 수평으로만 반복하세요. 반복 안함을 설정하면 사진이 하나만 남게 됩니다.

좋습니다. 이것이 배경 작업의 기본 기능이므로 여기서 마치겠습니다. 그러나 더 많은 제어를 가능하게 하는 두 가지 속성을 더 보여 드리겠습니다.

반복을 통해 레이아웃 디자이너는 하나의 작은 이미지를 사용하여 배경 질감과 그라데이션을 만들 수 있었습니다. 30x10픽셀 또는 그보다 더 작을 수도 있습니다. 아니면 조금 더. 이미지는 한쪽 또는 양쪽에서 반복되었을 때 전환이 눈에 띄지 않아 결과적으로 하나의 매끄러운 배경이 되었습니다. 그건 그렇고, 웹 사이트에서 매끄러운 질감을 배경으로 사용하려는 경우 지금 이 접근 방식을 사용할 가치가 있습니다. 오늘날 그라디언트는 이미 css3 메소드를 사용하여 구현될 수 있습니다. 이에 대해서는 나중에 확실히 이야기하겠습니다.

배경 위치

기본적으로 배경 이미지는 반복으로 설정되지 않은 한 블록의 왼쪽 상단에 표시됩니다. 그러나 background-position 속성을 사용하면 위치를 쉽게 변경할 수 있습니다.

다양한 방법으로 설정할 수 있습니다. 한 가지 옵션은 그림이 위치해야 하는 측면을 간단히 표시하는 것입니다.

배경 위치: 오른쪽 상단;

배경 - 위치 : 오른쪽 상단 ;

즉, 수직적으로 모든 것이 동일하게 유지됩니다. 배경 이미지는 상단에 있지만 수평에서는 측면을 오른쪽, 즉 오른쪽으로 변경했습니다. 위치를 설정하는 또 다른 방법은 백분율로 설정하는 것입니다. 이 경우 카운트다운은 어떤 경우든 왼쪽 상단부터 시작됩니다. 100% - 전체 블록. 따라서 그림을 정확히 중앙에 배치하려면 다음과 같이 작성합니다.

배경 위치: 50% 50%;

배경 위치: 50% 50%;

위치 지정에 관해 한 가지 중요한 점을 기억하십시오. 첫 번째 매개변수는 항상 수평 위치이고 두 번째 매개변수는 수직 위치입니다. 따라서 80% 20% 값을 보면 배경 이미지가 오른쪽으로 많이 이동하지만 많이 내려가지는 않을 것이라고 즉시 결론을 내릴 수 있습니다.

마지막으로 위치를 픽셀 단위로 지정할 수 있습니다. 모든 것이 동일합니다. 단지 % 대신 px가 있을 뿐입니다. 어떤 경우에는 그러한 위치 지정이 필요할 수도 있습니다.

속기 표기법

모든 것이 우리가 한 대로 설정되면 코드가 꽤 번거롭다는 점에 동의하세요. 그림에 대한 경로, 반복, 위치를 지정해야 함을 알 수 있습니다. 물론 반복과 위치가 항상 필요한 것은 아니지만, 어쨌든 속성에 대해서는 약식 표기법을 사용하는 것이 더 정확할 것입니다. 다음과 같습니다:

배경: #333 url(bg.jpg) 반복 없음 50% 50%;

배경: #333 url(bg.jpg) 반복 없음 50% 50%;

즉, 첫 번째 단계는 필요한 경우 전체적인 단색 배경색을 기록하는 것입니다. 그런 다음 이미지, 반복 및 위치에 대한 경로입니다. 일부 매개변수가 필요하지 않으면 간단히 생략하세요. 동의하세요. 이것이 훨씬 더 빠르고 편리하며 코드도 크게 줄입니다. 일반적으로 색상이나 그림만 표시해야 하는 경우에도 항상 약식으로 작성하는 것이 좋습니다.

배경 이미지의 크기 제어

현재 이미지는 다음 트릭을 보여주기에 적합하지 않으므로 다른 이미지를 사용하겠습니다. 블록 크기 이상으로 해주세요. 따라서 블록을 완전히 채우지 않도록 배경 이미지를 만드는 작업에 직면했다고 상상해보십시오. 예를 들어 그림은 블록 크기보다 훨씬 큽니다.

이 경우 무엇을 할 수 있습니까? 물론 가장 간단하고 합리적인 선택은 단순히 이미지를 줄이는 것이지만 항상 그렇게 할 수 있는 것은 아닙니다. 그것이 서버에 있고 현재 그것을 줄일 시간이나 기회가 없다고 가정해 보겠습니다. 이 문제는 상대적으로 새로운 기능이라고 할 수 있고 배경 이미지 또는 실제로 모든 배경의 크기를 조작할 수 있는 background-size 속성을 사용하여 해결될 수 있습니다.

이제 내 이미지가 블록의 모든 공간을 차지하지만 배경 크기를 지정하겠습니다.

배경 크기: 80% 50%;

배경 크기: 80% 50%;

다시 말하지만, 첫 번째 매개변수는 가로 크기를 설정하고, 두 번째 매개변수는 세로 크기를 설정합니다. 모든 것이 올바르게 적용되었음을 알 수 있습니다. 사진의 너비는 블록 너비의 80%, 높이는 절반이 되었습니다. 여기서는 한 가지 설명만 하면 됩니다. 크기를 백분율로 설정하면 그림의 비율에 영향을 미칠 수 있습니다. 따라서 비율을 뒤집지 않으려면 조심하세요.

짐작할 수 있듯이 배경 크기를 픽셀 단위로 지정할 수도 있습니다. 사용할 수 있는 키워드가 두 개 더 있습니다.

표지 – 적어도 한 면이 블록을 완전히 채우도록 이미지의 크기가 조정됩니다.

포함 – 이미지가 최대 크기로 블록에 완전히 맞도록 크기를 조정합니다.

이 값의 장점은 그림의 비율을 변경하지 않고 그대로 유지한다는 것입니다.

또한 사진을 늘리면 품질이 저하될 수 있다는 점도 이해해야 합니다. 레이아웃 디자이너의 삶과 실제 사례를 예로 들 수 있습니다. 데스크톱용으로 디자인할 때 사이트를 기본 모니터 너비(1280, 1366, 1920)에 맞게 조정해야 한다는 것을 누구나 알고 이해합니다. 예를 들어 1280 x 200 크기의 배경 이미지를 가져오고 제공하지 않는 경우 배경 크기, 너비가 더 큰 화면 빈 공간이 나타나고 이미지가 너비를 완전히 채우지 않습니다.

99%의 경우 이는 웹 개발자에게 적합하지 않으므로 이미지가 항상 창의 최대 너비까지 늘어나도록 background-size:cover를 설정합니다. 이것은 사용하기 좋은 기술이지만 이제 화면 너비가 1920픽셀인 사용자는 최적이 아닌 화질을 볼 수 있다는 문제에 직면하게 됩니다.

최대 너비까지 늘어납니다. 따라서 품질은 자동으로 저하됩니다. 여기서 유일한 올바른 해결책은 처음에 너비가 1920픽셀인 더 큰 이미지를 사용하는 것입니다. 그러면 가장 넓은 화면에서는 자연스러운 크기가 되고 다른 화면에서는 점차적으로 잘려지지만 동시에 배경 이미지를 적절하게 선택하면 사이트 모양에 영향을 미치지 않습니다.

일반적으로 이는 실제 레이아웃을 배치할 때 이 기사에서 얻은 지식을 사용하는 방법의 한 예일 뿐입니다.

CSS를 사용한 반투명 배경

CSS를 사용하여 구현할 수 있는 또 다른 기능은 반투명 배경입니다. 즉, 이 배경을 통해 그 뒤에 무엇이 있는지 볼 수 있습니다.

예를 들어, 이전 예제에서 사용한 이미지의 배경으로 전체 페이지를 설정하겠습니다. 모든 실험을 수행하는 식별자가 bg인 블록의 경우 rgba 색상 설정 형식을 사용하여 배경을 설정합니다.

앞서 말했듯이 CSS에는 색상을 설정하는 형식이 많이 있습니다. 그 중 하나는 그래픽 편집자에게 꽤 잘 알려진 형식인 RGB입니다. 다음과 같이 작성됩니다: rgb(17, 255, 34);

괄호 안의 첫 번째 값은 빨간색, 녹색, 파란색의 채도입니다. 값은 0에서 255까지의 숫자일 수 있습니다. 따라서 rgba 형식은 다르지 않으며 알파 채널이라는 매개 변수가 하나만 추가됩니다. 값은 0에서 1까지 가능하며, 0은 완전한 투명도입니다.

간략한 정보

CSS 버전

가치

url 값은 url() 구문 내부에 지정되는 그래픽 파일의 경로입니다. 파일 경로는 따옴표(큰따옴표 또는 작은따옴표)로 묶거나 따옴표 없이 작성할 수 있습니다. 없음 요소의 배경 이미지를 비활성화합니다. 상속 상위 값을 상속합니다.

HTML5 CSS2.1 IE Cr Op Sa Fx

객체 모델

document.getElementById("elementID ").style.BackgroundImage

브라우저

7.0 이하의 Internet Explorer 버전에서는 hasLayout 속성이 설정된 요소의 내부 테두리에 배경을 적용합니다. 요소에 hasLayout 이 없으면 background-image 속성은 사양에 지정된 대로 요소의 테두리를 따릅니다. 테두리가 실선이 아닌 점선 또는 점선으로 표시되면 표시 차이가 눈에 띄게 나타납니다.

요소가 스크롤 또는 자동으로 설정된 경우 Internet Explorer 8에서는 배경이 스크롤될 때 1픽셀 수직 지연이 발생합니다.

Internet Explorer 버전 7.0 이하에서는 상속 값을 지원하지 않습니다.

테이블 행(태그)에 배경이 설정된 경우 ), Chrome, Safari, iOS는 사양에 규정된 대로, 즉 각 셀에 대해 별도로 표시합니다. 브라우저는 전체 행에 대해 단색 배경을 표시해야 합니다. 예제 2에서는 오류를 보여주는 코드를 보여줍니다.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Chrome 브라우저에서 이 예제의 결과가 그림 1에 나와 있습니다. 1. Internet Explorer, Opera 및 Firefox 브라우저는 라인의 배경을 올바르게 표시합니다(그림 2).

쌀. 1. 각 셀의 배경을 반복합니다.

쌀. 2. 전체 라인의 배경

이전 강의에서 알 수 있듯이 CSS에는 배경 스타일을 지정하기 위한 많은 속성이 있습니다. 그리고 한 번에 여러 개를 지정해야 하는 경우 배경 속성을 사용하는 것이 좋습니다. 이는 많은 값을 허용하고 배경에 대한 각 속성을 별도로 작성할 필요가 없는 약칭 표기법입니다. 내용이 꽤 길고 불편합니다.)

배경 값이 기록되는 순서

배경 속성은 배경의 모든 속성을 결합합니다. 다음과 같은 값을 나열할 수 있습니다.

• 배경 이미지
• 배경 위치
• 배경 크기 (CSS3)
• 배경 반복
• 배경 첨부
• 배경 출처 (CSS3)
• 배경 클립 (CSS3)
• 배경색

값이 기록되는 순서는 임의적일 수 있습니다. 브라우저 자체가 속성과 값 간의 대응 관계를 결정합니다. 그러나 개략적인 설명을 위해 CSS 사양의 시퀀스를 사용합니다.

그림에서 볼 수 있듯이, 평소와 같이 모든 속성의 값을 공백으로 구분하여 작성합니다. 예외는 background-position 및 background-size 속성입니다. 이 속성은 슬래시 / 로 구분해야 합니다.

필수 값은 없습니다. 기본값으로 두려는 속성의 값은 생략할 수 있습니다. 그런데 기본 배경 설정은 다음과 같습니다.

배경 이미지: 없음; 배경 위치: 0% 0%; 배경 크기: 자동; 배경 반복: 반복; 배경 첨부: 스크롤; 배경 출처: 패딩 상자; 배경 클립: 테두리 상자; 배경색: 투명;

예를 들어 배경색(Background-color)과 클리핑 순서(Background-clip)만 정의하여 배경 속성을 통해 스타일을 작성해 보겠습니다.

배경: 콘텐츠 상자 #aaa;

이 코드는 다음 코드와 동일합니다.

배경 이미지: 없음; /* 기본값으로 둡니다 */ background-position: 0% 0%; /* 기본값으로 둡니다 */ background-size: auto; /* 기본값으로 남음 */ background-repeat: 반복; /* 기본값으로 남겨두기 */ background-attachment: scroll; /* 기본값으로 둡니다 */ background-origin: content-box; 배경 클립: 콘텐츠 상자; 배경색: #aaa;

여기서 우리는 약어 표기법을 작성할 때 변경되지 않은 속성을 언급했습니다. 그리고 아마도 이미 background-origin 속성이 background-clip과 동일한 값을 취했다는 것을 알 수 있을 것입니다. 비록 우리가 이를 변경할 의도는 없었지만요. 사실 background-origin과 background-clip은 동일한 키워드(content-box, padding-box, border-box)를 사용합니다. 그리고 background 속성에 이러한 키워드 중 하나만 지정하면 두 속성에 동시에 적용됩니다. background-origin 과 background-clip 에 대해 서로 다른 값을 지정해야 하는 경우 위 다이어그램에 표시된 대로 공백으로 구분하여 나란히 작성합니다(여기서는 순서가 중요합니다. background-origin 값이 먼저 오고 그 다음 배경 클립 값).

계단식이 속성에 미치는 영향

책의 첫 번째 부분인 CSS 계단식 강의에서 스타일 시트가 동일한 선택기에 대해 두 개의 동일한 속성을 지정하면 목록에서 더 낮은 속성이 우선시된다고 말했습니다. 이제 이 기능을 기억하고 그룹 속성이 어떻게 작동하는지 생각해 볼 때입니다. 배경, 그 중 여러 개가 하나의 요소에 적용되는 경우.

다음 코드를 작성했다고 가정해 보겠습니다.

배경색: 파란색; 배경: url(img/cat-transparent-bg.png) 반복 없음;

우리는 파란색 배경에 고양이 이미지가 나올 것으로 예상했지만 그렇지 않았습니다. 두 번째 배경 속성이 첫 번째 배경색 값을 기본값(즉, 투명)으로 덮어썼다는 것이 밝혀졌습니다. 다음 줄을 바꿔서 문제를 해결할 수 있습니다.

배경: url(img/cat-transparent-bg.png) no-repeat; 배경색: 파란색;

이제 작은 작업이 남았습니다.이 코드의 마지막 줄에서 background-color: blue 속성을 단순화된 background: blue 속성으로 바꾸면 배경 이미지와 반복 없음 값은 어떻게 될 것이라고 생각하시나요?

물론 "다중" 배경 속성을 사용하면 스타일시트 공간을 절약하고 시간을 절약할 수 있지만 문제가 발생할 수도 있으며 그 중 일부는 방금 다루었습니다. 그러므로 이 속성을 현명하게 사용하십시오. 배경색만 추가해야 한다면 별도의 background-color 속성을 사용하는 것이 좋습니다. 다른 모든 것에도 마찬가지입니다.

또한 Internet Explorer 8(또는 이전 버전)을 지원하는 스타일을 작성해야 하고 배경 속성에 CSS3 속성 값이 포함되어 있는 경우 브라우저는 해당 스타일을 읽을 수 없으며 배경 속성을 완전히 무시합니다. 따라서 CSS3의 속성을 별도로 작성하는 것이 좋습니다.