X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

무료 프리미엄 액세스

프리미엄 허브 기사, 프로젝트 파일 및 각 튜토리얼 비디오의 첫 번째 10 %의 우리의 전체 라이브러리를 액세스 온라인 자습서 도서관 .

지금 무료 계정을 만드십시오!

CSS를 사용하여 타일식 배경 설정
Google 번역에 의해 번역

Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are some additional properties that we can make use of to further control our backgrounds. Let's check it out!

1 단계

우선 최초의 - 우리는 타일에 그래픽을 필요 해요! 아마도이 작업을 수행하는 가장 좋은 장소에 포토샵 . 그것은 워터마크, 로고 또는 원하는 진짜 아무것도 같이 나타납니다 말할 정도로 당신은 부드럽게 그래픽을 사용할 수 있습니다. 그래픽이 너무 커서 있지 않은지 확인하고, PNG, JPEG, GIF 또는로 저장합니다. 지금 우리는 우리의 레이아웃에 사용할 준비가되었습니다.

2 단계

다음, 우리는 CSS를 통해 우리의 레이아웃에 그래픽을로드합니다. 이것은 손으로 코딩을 좀 필요 하겠지만, 그것은 해내 너무 복잡한 것도 아닙니다. 첫째, 당신이 그래픽 배경을 적용하려면 CSS 규칙을 찾습니다. 이것은 사업부 요소 클래스 규칙, 또는 사용에있을 수있는 다른 규칙을 제어의 ID 선택기를 수 있습니다. 나의 예제에서, 나는 재정의 본문 요소에 그래픽 배경을 적용하는거야.

전체 콜론 다음에 "배경 이미지"재산 후 "URL"에 추가합니다. 세미콜론 다음에 귀하의 그래픽 경로에 다음 괄호 안에 입력합니다. 예를 들어, 내 코드가 보이는 방법은 다음과 같습니다

배경 이미지 : URL (이미지 / Background.png);

내 그래픽, "Background.png가"라는 폴더 안에 위치합니다 "이미지." 파일을 저장하고 브라우저에서 작업을 미리해야합니다. 기본적으로 어떻게 배경 그래픽 타일 확인합니다. 우리는 그들과 같은 것들을 떠나, 또는 추가 CSS 속성을 사용하여 더 이상 물건을 사용자 정의하려면 계속 수 있습니다.

3 단계

당신이 기와 동작을 제어하려는 경우, "배경 - 반복"속성에 추가할 수 있습니다. 그런 다음 값을 "반복 - Y"를 ","반복 - x "를 반복한다,"또는 설정할 수 있습니다 "아니오 - 반복." 반복 - X 및 더 - 반복 기와 허용하지 않는 반면, 오직 가로 또는 세로 기와 반복 - Y의 힘.

4 단계

Another option that we have available is the ability to control the horizontal and vertical positioning of a non-tiling background image. Try adding in the "background-position" property, followed by two pixel values. The first pixel value is the graphic's horizontal position, and the second, its vertical position.


As you can see, CSS makes it super-easy to control background images. The fun part is coming up with cool graphics and seeing what's possible. Try experimenting with different tiled images, gradients, and patterns. Have fun!

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link